我刚刚实现了Dropzone.js,使文件上传到我的网站上更容易。文件上传很好,上传完成后,我给文件一个id,并将该id返回给浏览器。
这很好,除了我不知道如何捕获从服务器返回的id。在这个SO答案中,我发现了一些应该这样做的代码,但它对我不起作用。我现在的代码粘贴在下面。
有人知道我如何获得服务器返回的值吗?欢迎所有提示!
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/static/js/external/dropzone.min.js"></script>
<link href="/static/css/external/dropzone.css" rel="stylesheet">
<script type="text/javascript">
$(function() {
Dropzone.options.uiDZResume = {
success: function(file, response){
console.log('WE NEVER REACH THIS POINT.');
alert(response);
}
};
});
</script>
</head>
<body>
<form action="/doc"
class="dropzone"
id="my-awesome-dropzone"></form>
</body>
</html>
查看dropzone.js的源代码,似乎有很多事件可以收听。
events: [
"drop"
"dragstart"
"dragend"
"dragenter"
"dragover"
"dragleave"
"addedfile"
"removedfile"
"thumbnail"
"error"
"errormultiple"
"processing"
"processingmultiple"
"uploadprogress"
"totaluploadprogress"
"sending"
"sendingmultiple"
"success"
"successmultiple"
"canceled"
"canceledmultiple"
"complete"
"completemultiple"
"reset"
"maxfilesexceeded"
"maxfilesreached"
]
在这里,"成功"事件似乎是合适的。
一个好的起点是将一个事件侦听器绑定到您的dropzone,并查看您在此类事件上得到了什么数据。
$('#my-awesome-dropzone').on('success', function() {
var args = Array.prototype.slice.call(arguments);
// Look at the output in you browser console, if there is something interesting
console.log(args);
});
$("#dropzoneForm").dropzone({
maxFiles: 2000,
url: "../Uploader/HttpUploadHandler.ashx?param=" + result.prjID,
success: function(file, response){
//alert("Test1");
}
});
这有帮助吗?
Dropzone.options.myDropzone = {
init: function() {
thisDropzone = this;
this.on("success", function(file, responseText) {
var responseText = file.id // or however you would point to your assigned file ID here;
console.log(responseText); // console should show the ID you pointed to
// do stuff with file.id ...
});
}
};
例如,我设置了将服务器路径附加到图像名称,并在提交时将其作为值传递到表单字段中。只要你定义responseText指向文件ID,你就应该得到一个回报。
此链接可能也很有用:https://github.com/enyo/dropzone/issues/244
试试这个:
Dropzone.options.myAwesomeDropzone = {
success: function(file, response){
//alert(response);
console.log(response);
}
};
它适用于我的
$(function() {
var myDropzone = new Dropzone(".dropzone");
myDropzone.on("success", function() {
alert('Uploaded!');
});
});
我正在使用jQuery,这对我来说很有效:
var dz = $(".my-awesome-dropzone").dropzone()[0];
dz.dropzone.on("success", function (file, response) { ... }));
注意,dropzone()
方法将dropzone
属性添加到DOM对象。您必须对对象调用on()
,而不是jQuery on()
。
我想把它作为注释添加,但我做不到,因为我的声誉很低。
对于那些仍然难以从服务器检索响应的人来说,如果你使用分块,Dropzone在这种情况下会硬编码一个空白响应:
https://github.com/enyo/dropzone/blob/caf200c13fd3608dd6bed122926d5848927f55b4/dist/dropzone.js#L2344
if (allFinished) {
_this14.options.chunksUploaded(file, function () {
_this14._finished(files, '', null);
});
}
因此,分块上传似乎不支持检索响应。