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

时间:2012-12-18 23:40:30

标签: php jquery jquery-plugins blueimp

这是插件: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中找不到任何东西。我感谢任何帮助。

6 个答案:

答案 0 :(得分:4)

自插件版本5以来,json响应已更改:https://github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response

所以你只需用以下内容调整你的上传课程:

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

你已经完成了

答案 1 :(得分:4)

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

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

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

答案 2 :(得分:2)

将HTML(以及程序化结果DOM)对象添加到< tr class =“template-upload fade”>之外的模板时,会出现“空文件上传结果”。 HTML标记,例如:假设您添加了另一个< tr>到模板

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

似乎必须对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();

希望这有助于其他人:)

答案 3 :(得分:0)

好吧,这似乎不是jQuery问题,而是服务器端问题。在我的例子中,它是一个PHP脚本,需要调整如下。

参见function post(),编辑这一行

$json = json_encode($info);

$json = json_encode(array($this->options['param_name'] =>$info));

我还必须在函数的最后一行编辑回声;而不是

echo $json;

现在有

echo str_replace('\/','/',$json);

似乎可以正常返回正确的json数组。希望它有所帮助。

答案 4 :(得分:0)

在我的情况下,我修改了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 () {




到此



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




答案 5 :(得分:0)

如前所述,这是因为服务器响应不是插件所期望的(这是一个文件数组as shown here)。 如果您不(或不能)想要更改后端,解决方案是将响应中的结果对象替换为插件期望的结果对象(然后包含文件数组)。

这可以在 fileuploaddone 事件中完成。

我们假设这是上传完成后从服务器返回的JSON响应: enter image description here

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模式,并且您将不再获得“空文件上载结果”消息。