logo标签列表

蓝色印象jQuery文件上传插件 - "空文件上传"结果PHP。

phpjqueryjquery-pluginsblueimp
9
这是插件：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中都找不到任何信息。我会感激任何帮助。

1
这个问题有进展了吗？我遇到了类似的问题（与CodeIgniter设置相关）。 - pop
暂时还没有，它已经被搁置了。如果我再试一次，我一定会在这里更新的。 - Brian Duncan
7个回答
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"
      }
    ]}

特别提醒，要求如下：请注意，响应应始终是一个JSON对象，其中包含一个文件数组，即使只上传了一个文件也是如此。 通过:: https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler
4
2
“空文件上传结果”会在将HTML对象（以及程序化结果DOM）添加到模板中时出现，这些对象位于<tr class="template-upload fade"> HTML标记之外，例如：假设您向模板添加了另一个<tr>。
这将导致文件被正确上传，并且对于每个上传的文件，您将会一次性收到“空文件上传结果”。
似乎与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();

希望这能帮助其他人 :)
0

好的，这似乎不是jQuery的问题，而是一个服务器端的问题。在我的情况下，这是一个PHP脚本，需要进行以下调整。

查看post()函数，编辑此行

$json = json_encode($info);

到

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

我还必须编辑函数最后一行的回显；而不是

echo $json;

现在有了

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

看起来它能够正常工作并返回正确的JSON数组。希望这有所帮助。

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

0

对我来说，问题出在上传文件的大小上。 我调整了以下php.ini参数：

  • memory_limit
  • post_max_size
  • upload_max_filesize
  • max_file_uploads
1
请添加更多细节以扩展您的答案，例如工作代码或文档引用。 - Community
@社区，如果您遇到“空文件上传”错误，请更改我提到的变量值（memory_limit、post_max_size、upload_max_filesize、max_file_uploads）。增加它们的值。 - user3190790
0

如之前提到的那样，这是因为服务器响应不是插件期望的（即文件数组 如此显示）造成的。 如果您不想或不能更改后端，则解决方案是用插件期望的结果对象替换响应中的结果对象（其中包含文件数组）。

可以在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;
});

我们想要用一个新的对象来替换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模式，您将不再收到“空文件上传结果”消息。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接