[英]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.