Dropzone.js 不上传 .zip 文件答案

【问题标题】：Dropzone.js doesn't upload .zip filesDropzone.js 不上传 .zip 文件
【发布时间】：2017-11-21 12:15:42
【问题描述】：

我必须使用 dropzone 上传 ZIP 档案，当我选择档案时，我看到进度条从 0 变为 100，但请求永远不会到达服务器，我在表单中指定的操作永远不会被调用。这是我页面上的文件上传器：

<form action="URL_ACTION" class="dropzone dropzone-file-area" id="dropzoneZip" method="post" enctype="multipart/form-data">
  <div class="fallback">
     <input name="file" type="file" />
     <input type="submit" value="Upload" name="upload" />
  </div>
</form>

这是我的 JS 代码：

Dropzone.options.dropzoneZip = {
        dictDefaultMessage: "Drag files here o click to upload",
        maxFiles: 1,
        acceptedFiles: ".zip",
        init: function () {
            this.on("error", function (file, errorMessage) {
                alert("error : " + errorMessage);
            });
            this.on("addedfile", function (e) {
                var n = Dropzone.createElement("<a href='javascript:;' class='btn red btn-sm btn-block'>Remove</a>"),
                    t = this;
                n.addEventListener("click", function (n) {
                    n.preventDefault(), n.stopPropagation(), t.removeFile(e)
                }), e.previewElement.appendChild(n)
            }),
            this.on("complete", function (data) {
                if (data.xhr.responseText == "success") {
                    swal({
                        title: 'Success',
                        text: 'File uploaded',
                        type: "success"
                    }).then(
                    function () {
                        $(".se-pre-con").fadeIn("slow");
                        location.reload();
                    })
                }
            }),
            this.on('error', function (file, errorMessage) {
                if (errorMessage != "success") {
                    var errorDisplay = document.querySelectorAll('[data-dz-errormessage]');
                    errorDisplay[errorDisplay.length - 1].innerHTML = errorMessage;
                }
                else if (errorMessage.indexOf('404') !== -1) {
                    var errorDisplay = document.querySelectorAll('[data-dz-errormessage]');
                    errorDisplay[errorDisplay.length - 1].innerHTML = 'Error 404: The upload page was not found on the server';
                } else if (errorMessage.indexOf('500') !== -1) {
                    var errorDisplay = document.querySelectorAll('[data-dz-errormessage]');
                    errorDisplay[errorDisplay.length - 1].innerHTML = 'Error 500: Internal server error';
                }
            });
        }
    }

这是我检查文件类型的操作代码：

  if (Request.Files != null && Request.Files.Count > 0)
  {
      if (Request["type"]=="zip" && (Request.Files[0].ContentType == "application/x-compressed" || Request.Files[0].ContentType == "application/x-zip-compressed" || Request.Files[0].ContentType == "application/zip" || Request.Files[0].ContentType == "multipart/x-zip"))
        uploadZip();
  }

但是这个动作永远不会发生。我尝试用相同的方法上传图像，它可以正常工作。我无法弄清楚我做错了什么

【问题讨论】：

标签： javascript jquery asp.net dropzone.js

【解决方案1】：

index.html

<html>

<head>   
<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<!-- 1 -->
<link href="dropzone.css" type="text/css" rel="stylesheet" />

<!-- 2 -->
<script src="dropzone.min.js"></script>
<style>
    .dropzone .dz-preview {
        display:none;
    }

</style>
</head>

<body>


<form  action="upload.php" class="dropzone dropzone-file-area" id="dropzoneZip" method="post" enctype="multipart/form-data">
    <div class="fallback">
     <input name="file" type="file" />

  </div>
</form><input type="submit" value="Upload" name="upload" id="submit-all" />

<script>

Dropzone.options.myDropzone = {

  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,

  init: function() {
    var submitButton = document.querySelector("#submit-all")
        myDropzone = this; // closure

    submitButton.addEventListener("click", function() {
      myDropzone.processQueue(); // Tell Dropzone to process all queued files.

    });

    // You might want to show the submit button only when 
    // files are dropped here:
    this.on("addedfile", function() {
      // Show submit button here and/or inform user to click it.

    });

  }
};
</script></body></html>

更新.php

<?php
$ds          = DIRECTORY_SEPARATOR;  //1

$storeFolder = 'uploads';   //2

if (!empty($_FILES)) {

    $tempFile = $_FILES['file']['tmp_name'];          //3             

    $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4

    $targetFile =  $targetPath. $_FILES['file']['name'];  //5

    move_uploaded_file($tempFile,$targetFile); //6

}
?>

如果你有 xamp/uniserver 那么它完全可以工作我已经测试了上面的代码为服务器中上传文件的地方创建一个上传文件夹

【讨论】：

抱歉，我必须指定我使用的是 ASP.NET。如果您有任何想法，我愿意接受任何建议

【解决方案2】：

好的，我找到了原因：我尝试上传的文件超出了 Web.config 文件中的 maxRequestLength 参数。对于较小的文件，上传工作正常

【讨论】：