繁体   English   中英

Dropzone.js不上传.zip文件

[英]Dropzone.js doesn't upload .zip files

我必须使用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();
  }

但是,这一行动从未实现。 我尝试使用相同的方法上传图片,并且可以正常工作。 我无法弄清楚我在做什么

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>

update.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,那么它可以完全正常工作我已经测试了上面的代码创建一个uploads文件夹,以便在服务器上上传文件

好的,我发现了原因:我尝试上传的文件超过了Web.config文件上的maxRequestLength参数。 使用较小的文件,上传可以正常工作

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM