Blueimp jQuery文件上传插件 – “空文件上传”结果PHP
这是插件： https ： //github.com/blueimp/jQuery-File-Upload
我在上传文件后从插件中获取我想要的响应时遇到问题。
在包含插件的页面上，我有以下内容
$('#fileupload').fileupload( 'option', { 'maxNumberOfFiles' :1, 'url' : '/admin/upload_handler.php' } ); 在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 } ]
但回调找不到文件数组，我收到错误：’空文件上传结果’。 我觉得我在这里缺少一些关键的东西 – 我在文档，论坛或Stack Overflow中找不到任何东西。 我感谢任何帮助。
从插件版本5开始，json响应发生了变化： https ： //github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response
所以你只需调整你的上传课程：
$filejson = new stdClass(); $filejson->files[] = $fileArray; return json_encode($filejson);
而且你已经完成了
您的返回需要包含在文件数组中，如下所示：
{"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" } ]}
特别是，要求是： Note that the response should always be a JSON object containing a files array even if only one file is uploaded.
将HTML（和程序结果DOM）对象添加到
这将导致文件正确上传，并且对于每个上传的文件，您将获得一次“空文件上载结果”。
似乎必须对JS模板引擎做一些事情。
这可以在第128行之后的jquery.fileupload-ui，js中修复
原始代码：
// 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();
在第128行之后添加以下代码：
if (!$(data.context[index]).hasClass(that.options.uploadTemplateId)) { return true; }
结果代码：
// 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();
希望这有助于其他人:)
好吧，这似乎不是一个jQuery问题，而是一个服务器端问题。 在我的例子中，它是一个PHP脚本，需要调整如下。
请参阅函数post（），编辑此行
$json = json_encode($info);
至
$json = json_encode(array($this->options['param_name'] =>$info));
我还必须在函数的最后一行编辑回声; 代替
echo $json;
现在有
echo str_replace('\/','/',$json);
它似乎工作正常返回正确的json数组。 希望能帮助到你。
在我的情况下，我修改了jquery.fileupload-ui.js文件以直接查找JSON结果。
更改此代码段
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 () {
如前所述，这是因为服务器响应不是插件所期望的（这是一个如下所示的文件数组）。 如果您不（或不能）想要更改后端，则解决方案是将响应中的结果对象替换为插件期望的结果对象（然后包含files数组）。
这可以在fileuploaddone事件中完成。
我们假设这是上传完成后从服务器返回的JSON响应： 
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; });
我们想用一个可以被blueimp插件解析的新结果替换结果对象，让我们定义它（注意：这是一个包含文件数组的对象，根据插件文档）。
//tempFolder is optional var filesUploaded = { "files": [], "tempFolder": null };
替换结果对象：
.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; });
该插件现在应该呈现正常，因为它将解析预期的JSON模式，您将不再获得“空文件上载结果”消息。