jQuery文件上传预览缩略图

Question

在http://blueimp.github.com/jQuery-File-Upload/的示例中，文件上传程序会创建要上传的图像的缩略图预览。

我知道如何在上传后显示缩略图，因为done:回调返回有关您上传的文件的一些数据，但在上传之前如何处理（我认为这不可能在没有先上传文件的情况下完成）？

- imperium2335

Answer 1

我发现这方面的文档非常零散。通过查看此演示的源代码，我找到了解决方法。

首先，您需要包含以下依赖项：

• jquery
• jquery.ui.widget
• load-image（来自https://github.com/blueimp/JavaScript-Load-Image）
• load-image-meta（来自https://github.com/blueimp/JavaScript-Load-Image）
• canvas-to-blob（来自https://github.com/blueimp/JavaScript-Canvas-to-Blob）
• jquery.iframe-transport
• jquery.fileupload
• jquery.fileupload-process
• jquery.fileupload-image

然后，您可以像这样将预览图像插入DOM中（使用CoffeeScript）:

$(...).fileupload().on 'fileuploadprocessalways', (e, data) ->
  file = data.files[data.index]
  if file.preview?
    myContainer.append(file.preview)

如果它不能正常工作，那么请仔细检查您是否包含了所有依赖项的最新版本。

- balexand