BlueImp jQuery 文件上传 - 返回缩略图 URL答案

【问题标题】：BlueImp jQuery File Upload - Return the thumbnail URLBlueImp jQuery 文件上传 - 返回缩略图 URL
【发布时间】：2013-12-15 20:12:13
【问题描述】：

我正在尝试从 jQuery File Upload BlueImp 的 fileupload 模块返回缩略图 URL。

这是我的上传脚本：

<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = 'server/php/';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<div class="box">').appendTo('#files');
                $('.box').last().html('<a href="'+file.url+'"><img width="220px" height="120px" src="'+file.url+'"/></a>
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>

如您所见，我可以返回“file.url”（例如：http://website.com/server/php/files/image.png）但我想像这样返回“file.thumbnailURL”（例如：http://website.com/server/php/thumbnails/image.png）

$('.box').last().html('<a href="'+file.url+'"><img width="220px" height="120px" src="'+file.thumbnailURL+'"/></a>

但它是未定义的（我知道）那么如何定义 file.thumbnailURL 呢？定义 file.url file.name...的代码在哪里？

谢谢你，大卫。

【问题讨论】：

标签： javascript php jquery file-upload blueimp

【解决方案1】：

您的 php 脚本会创建缩略图吗？您可以console.log(data) 并检查它是否是响应的一部分。

【讨论】：

谢谢，我发现缩略图的URL是通过控制台定义为file.thumbnailUrl的。

【解决方案2】：

   // try
     + data.files[0].thumbnailUrl +   
  //  or 
     + data.files.thumbnailUrl +   
   // It worked for me

【讨论】：