Blueimp文件上传插件-“空文件上传”jQuery结果

Question

下面是插件：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中找不到任何东西。我很感谢你的帮助。

Answer 1

从该插件的版本5开始，json响应发生了变化：https://github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response

因此，您只需使用以下命令调整您的upload类：

$filejson = new stdClass();
$filejson->files[] = $fileArray;
return json_encode($filejson);

你就完事了

Answer 2

您的返回值需要包含在一个文件数组中，如下所示：

    {"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.

通过:：https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler

Answer 3

将HTML (和编程结果DOM中的)对象添加到位于HTML标记之外的模板时，将出现“空文件上传结果”，例如:假设您向模板添加了另一个对象

这将导致文件被正确上传，并且对于每个上传的文件，您将获得一次“空文件上传结果”。

似乎与JS模板引擎有关。

这可以在jquery.fileupload-ui，js中128行之后修复

原始代码：

    // 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();

希望这对其他人有帮助:)