php DropzoneJS：上传成功后如何获得PHP响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19390471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DropzoneJS: How to get PHP response after upload success?
提问by Patrick Falize
I'm trying to implement Dropzone on my site. I want to listen for the "success" event and then take the server response and add some info from it to a form on the same page as the DropZone after the upload is completed.
我正在尝试在我的网站上实施 Dropzone。我想侦听“成功”事件，然后获取服务器响应，并在上传完成后将一些信息添加到与 DropZone 相同页面上的表单中。
the info i want to get in the server response is a direct link to the file.
我想在服务器响应中获得的信息是文件的直接链接。
the website of dropzone: http://www.dropzonejs.com/
dropzone 网站：http: //www.dropzonejs.com/
my project website:
我的项目网站：
http://37.34.62.131/test/
so i completed this in a older version of my project but i cant figure it out how to do it with dropzone.js
所以我在我的项目的旧版本中完成了这个，但我不知道如何使用 dropzone.js
working example:
工作示例：
http://37.34.62.131/test/uploader%201.0/
what i try to do is when a file has been uploaded i want to get the php response back on the same page with the download links as shown below.
我试图做的是当一个文件被上传时，我想通过下载链接在同一页面上返回 php 响应，如下所示。
i can also send you my source codes so you can look for yourself.
我也可以把我的源代码发给你，你可以自己找找。
my php code i want to see in the response:
我想在响应中看到我的 php 代码：
print '<h2>Picture Uploaded Successfuly!!!!</h2> <p id="codes">
<img src="'.$imgurl.'" height="300" alt="Uploaded Picture" >
<label for="codebb">BBCode:</label>
<input type="text" id="codebb" value="[URL='.$siteurl.'][IMG]'.$dlurl.'[/IMG][/URL]" onclick="javascript:this.focus();this.select();" readonly="true" /><br />
<label for="codehtml">HTML Code: </label>
<input type="text" id="codehtml" value=\'<a href="'.$siteurl.'"><img src="'.$dlurl.'" alt="'.$alt.'" /></a>\' onclick="javascript:this.focus();this.select();" readonly="true" /><br />
<label for="codedirect">Direct Link:</label>
<input type="text" id="codedirect" value="'.$dlurl.'" onclick="javascript:this.focus();this.select();" readonly="true" /></p>';
echo ".$newname";
Can anyone help me understand what I'm missing?
谁能帮我理解我错过了什么？
回答by Ichibanpanda
Looking at your website, seems like you were able to fix the problem.
查看您的网站，似乎您能够解决问题。
Anyways this is for someone who might still be looking. You need to add the function success with two parameters. The first param returned is always file, second one is the response.
无论如何，这适用于可能仍在寻找的人。您需要使用两个参数添加函数成功。返回的第一个参数始终是文件，第二个参数是响应。
One of the other answers had this, but this response did not initially include it. It's important to set the autoDiscover to false, or this example (as provided in the docs) does not work. Tested on Chrome/IE/Edge on Win10.
其他答案之一有这个，但这个回复最初没有包含它。将 autoDiscover 设置为 false 很重要，否则此示例（如文档中提供的）不起作用。在 Win10 上的 Chrome/IE/Edge 上测试。
Sample:
样本：
Dropzone.autoDiscover = false;
$(function() {
Dropzone.options.uiDZResume = {
success: function(file, response){
alert(response);
}
};
});
回答by Braian Mellor
I had have some problems with dropzone, but i found this solution:
我在使用 dropzone 时遇到了一些问题，但我找到了这个解决方案：
new Dropzone("#myDropzone", {
maxFilesize: 2, // MB
init: function() {
this.on("success", function(file, responseText) {
console.log(responseText);
});
}
});
回答by Reign.85
The valided answer not worked for me. This does :
有效的答案对我不起作用。这确实：
$(".mydrop").dropzone({
url: upload_url,
success : function(file, response){
console.log(file);
console.log(response);
}
});
And in the php side:
在 php 端：
echo json_encode($whateverouwant);
die();
回答by razzbee
None of the above worked for me, but this ...
以上都不适合我，但这......
<script>
Dropzone.autoDiscover = false;
$(function(){
uploader = new Dropzone(".dropzone",{
url: "http://locahost/upload",
paramName : "uploadedFiles",
uploadMultiple :false,
acceptedFiles : "image/*,video/*,audio/*",
addRemoveLinks: true,
forceFallback: false,
maxFilesize:1000,
parallelUploads: 100,
});//end drop zone
uploader.on("success", function(file,response) {
console.log(response)
});
});//end jq
</script>
回答by Atanas Ginev
Note that there is an issue with chunked uploads and never get back the response from the server on success. All the previous answers will not work in that case. Solution could be by manually parsing XHR response like so:
请注意，分块上传存在问题，并且永远不会在成功时从服务器返回响应。在这种情况下，以前的所有答案都不起作用。解决方案可以通过手动解析 XHR 响应，如下所示：
const galleryZone = new Dropzone(".dropzone-gallery", {
url: your_upload_url_in_here,
chunking: true,
forceChunking: true,
chunkSize: 2000000,
success: (file, response) => {
console.log(JSON.parse(file.xhr.response));
}
});
Alse you could check the issue at Dropzone's repository in here https://gitlab.com/meno/dropzone/issues/51#note_47553173
此外，您可以在此处查看 Dropzone 存储库中的问题https://gitlab.com/meno/dropzone/issues/51#note_47553173
回答by Vinay Sikarwar
But if I am using this code then i have to remove the dropzone class from form. Otherwise it will throw this error.
但是，如果我使用此代码，则必须从表单中删除 dropzone 类。否则会抛出这个错误。
throw new Error("Dropzone already attached.");
---------------------------------------------
new Dropzone("#myDropzone", {
maxFilesize: 2, // MB
init: function() {
this.on("success", function(file, responseText) {
console.log(responseText);
});
}
});
