Blueimp jQuery 文件上传插件 - “空文件上传”结果 PHP
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13943314/
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
Blueimp jQuery File Upload plugin - "Empty file upload" result PHP
提问by Brian Duncan
Here's the plugin: https://github.com/blueimp/jQuery-File-Upload
这是插件：https: //github.com/blueimp/jQuery-File-Upload
I'm having a problem getting the response I want from the plugin after uploading a file.
上传文件后，我在从插件中获取我想要的响应时遇到问题。
On the page with the plugin, I have the following
在带有插件的页面上，我有以下内容
$('#fileupload').fileupload(
'option',
{
'maxNumberOfFiles' :1,
'url' : '/admin/upload_handler.php'
}
);
In upload_handler.phpI successfully retrieve the uploaded files from $_FILES and do stuff, then send a response back in JSON. I've confirmed using Firebug that the response is in the proper format:
在upload_handler.php我成功地从 $_FILES 检索上传的文件并做一些事情，然后以 JSON 发送响应。我已经使用 Firebug 确认响应的格式正确：
[
{
"url" : "image_url",
"thumbnail_url" : "image_th_url",
"delete_url" : "test",
"delete_type" : "DELETE",
"name" : "foobar.jpg",
"size" : 7419
}
]
But the callback can't find the files array, and I get the error: 'Empty file upload result'. I feel like I'm missing something crucial here--I can't find anything in the docs, forums, or Stack Overflow. I appreciate any help.
但是回调找不到文件数组，我收到错误：“空文件上传结果”。我觉得我在这里遗漏了一些重要的东西——我在文档、论坛或 Stack Overflow 中找不到任何东西。我很感激任何帮助。
采纳答案by PERPO
Since the version 5 of the plugin, the json response has changed: https://github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response
从插件的第 5 版开始，json 响应发生了变化：https: //github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response
So you just have tweak your upload class with:
所以你只需调整你的上传类：
$filejson = new stdClass();
$filejson->files[] = $fileArray;
return json_encode($filejson);
And you're done
你已经完成了
回答by reidLinden
Your return needs to be enclosed in a files array, like this:
您的返回需要包含在一个 files 数组中，如下所示：
{"files": [
{
"name": "picture1.jpg",
"size": 902604,
"url": "http:\/\/example.org\/files\/picture1.jpg",
"thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture1.jpg",
"deleteUrl": "http:\/\/example.org\/files\/picture1.jpg",
"deleteType": "DELETE"
},
{
"name": "picture2.jpg",
"size": 841946,
"url": "http:\/\/example.org\/files\/picture2.jpg",
"thumbnailUrl": "http:\/\/example.org\/files\/thumbnail\/picture2.jpg",
"deleteUrl": "http:\/\/example.org\/files\/picture2.jpg",
"deleteType": "DELETE"
}
]}
in particular, the requirement is: Note that the response should always be a JSON object containing a files array even if only one file is uploaded.
具体来说，要求是： Note that the response should always be a JSON object containing a files array even if only one file is uploaded.
回答by reidLinden
The "Empty file upload result" will occur when adding HTML (and in programmatical result DOM) objects to the template that are outside of the <tr class="template-upload fade"> HTML tag, e.g.: let's say you add another <tr> to the template
将 HTML（以及编程结果 DOM）对象添加到 <tr class="template-upload fade"> HTML 标记之外的模板时，将出现“空文件上传结果”，例如：假设您添加了另一个 < tr> 到模板
This will result in the file(s) being uploaded correctly and for every uploaded file you will get the "Empty file upload result" once.
这将导致文件被正确上传，并且对于每个上传的文件，您将获得一次“空文件上传结果”。
Seems to have to do something with the JS template engine.
好像还得用JS模板引擎做点什么。
This can be fixed in jquery.fileupload-ui,js, right after line 128
这可以在 jquery.fileupload-ui,js 中修复，就在第 128 行之后
Original code:
原始代码：
// Callback for successful uploads:
done: function (e, data) {
var that = $(this).data('blueimp-fileupload') ||
$(this).data('fileupload'),
files = that._getFilesFromResponse(data),
template,
deferred;
if (data.context) {
data.context.each(function (index) { // LINE 128
var file = files[index] ||
{error: 'Empty file upload result'},
deferred = that._addFinishedDeferreds();
Add the following code after line 128:
在第 128 行后添加以下代码：
if (!$(data.context[index]).hasClass(that.options.uploadTemplateId)) { return true; }
Resulting code:
结果代码：
// Callback for successful uploads:
done: function (e, data) {
var that = $(this).data('blueimp-fileupload') ||
$(this).data('fileupload'),
files = that._getFilesFromResponse(data),
template,
deferred;
if (data.context) {
data.context.each(function (index) { //LINE 128
if (!$(data.context[index]).hasClass(that.options.uploadTemplateId)) { return true; } // YOUR ADDED LINE
var file = files[index] ||
{error: 'Empty file upload result'},
deferred = that._addFinishedDeferreds();
Hope this helps others :)
希望这对其他人有帮助:)
回答by pop
OK, this seems like it is not a jQuery problem, but rather a server-side issue. In my case it is a PHP script, which needed tweaking as follows.
好吧，这似乎不是 jQuery 问题，而是服务器端问题。就我而言，它是一个 PHP 脚本，需要进行如下调整。
See function post(), edit this line
见函数 post()，编辑这一行
$json = json_encode($info);
to
到
$json = json_encode(array($this->options['param_name'] =>$info));
and I had to also edit the echo at the last line of the function; instead of
我还必须在函数的最后一行编辑回声；代替
echo $json;
there is now
现在有
echo str_replace('\/','/',$json);
It seems to work fine returning a correct json array. Hope it helps.
返回正确的 json 数组似乎工作正常。希望能帮助到你。
回答by Kareem Cambridge
In my case I, i modified the jquery.fileupload-ui.js file to look for the JSON result directly.
就我而言，我修改了 jquery.fileupload-ui.js 文件以直接查找 JSON 结果。
Change this snippet
更改此代码段
if (data.context) {
data.context.each(function (index) {
var file = files[index] ||
{error: 'Empty file upload result'};//CHANGE
deferred = that._addFinishedDeferreds();
that._transition($(this)).done(
function () {To This
至此
if (data.context) {
data.context.each(function (index) {
var file = data._response.result[index] ||
{error: 'Empty file upload result'};//TO THIS
deferred = that._addFinishedDeferreds();
that._transition($(this)).done(
function () {回答by Giorgio Minardi
As mentioned before this happens because the server response is not what the plugin expects (which is a files array as shown here). If you don't (or cannot) want to change the backend, a solution is to replace the result object in the response with the result object the plugin expects (which then contains the files array).
如前所述，发生这种情况是因为服务器响应不是插件所期望的（这是一个文件数组，如下所示）。如果您不想（或不能）想要更改后端，则解决方案是将响应中的结果对象替换为插件期望的结果对象（然后包含文件数组）。
This can be done in the fileuploaddoneevent.
这可以在fileuploaddone事件中完成。
Let's assume that this is the JSON response returned from the server once the upload is done:
让我们假设这是上传完成后从服务器返回的 JSON 响应：
data.resultholds the server response:
data.result保存服务器响应：
.bind('fileuploaddone', function(e, data) {
//this will now contains the server response
//as per the attached image: an array of elements
data.result;
});
We want to replace the resultobject with a new one that can be parsed by the blueimp plugin, let's define it (note: this is an object that contains an array of files, as per the plugin docs).
我们想用一个可以被 blueimp 插件解析的新对象替换结果对象，让我们定义它（注意：这是一个包含文件数组的对象，根据插件文档）。
//tempFolder is optional
var filesUploaded = { "files": [], "tempFolder": null };
Replacing the result object:
替换结果对象：
.bind('fileuploaddone', function(e, data) {
//creating a file object in the format the jquery plugin is expecting
var file = {
deleteType: "DELETE",
deleteUrl:"#",
type: data.result[0].MimeType,
thumbnailUrl : "#",
url: "#",
name: data.result[0].Name,
size: data.result[0].Size
}
//adding it to the file list
filesUploaded.files.push(file);
data.result = null;
//replacing the server response with the 'custom' one we just created
data.result = filesUploaded;
});
The plugin should now render fine as it will be parsing the expected JSON schema and you won't get the "Empty file upload result" message anymore.
该插件现在应该可以正常呈现，因为它将解析预期的 JSON 模式，并且您不会再收到“空文件上传结果”消息。
