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

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.php I 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中找不到任何东西。我感谢任何帮助。

6 个解决方案

#1

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

而且你已经完成了

#2

Your return needs to be enclosed in a files array, like this:

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

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

特别是，要求是：请注意，即使只上传了一个文件，响应也应始终是包含文件数组的JSON对象。

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

#3

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）对象添加到 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

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

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 :)

希望这有助于其他人:)

#4

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

至

$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数组。希望能帮助到你。

#5

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 () {

#6

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).

如前所述，这是因为服务器响应不是插件所期望的（这是一个如下所示的文件数组）。如果您不（或不能）想要更改后端，则解决方案是将响应中的结果对象替换为插件期望的结果对象（然后包含files数组）。

This can be done in the fileuploaddone event.

这可以在fileuploaddone事件中完成。

Let's assume that this is the JSON response returned from the server once the upload is done:

我们假设这是上传完成后从服务器返回的JSON响应：

data.result holds 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 result object 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模式，您将不再获得“空文件上载结果”消息。

#1