jquery文件上传预览大拇指答案

【问题标题】：Jquery file upload preview thumbsjquery文件上传预览大拇指
【发布时间】：2013-07-26 01:09:52
【问题描述】：

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

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

【问题讨论】：

标签： jquery jquery-file-upload

【解决方案1】：

我发现这方面的文档参差不齐。我通过查看this demo 的来源找到了答案。

首先你需要包含以下依赖：

jquery
jquery.ui.widget
加载图像（来自https://github.com/blueimp/JavaScript-Load-Image）
加载图像元（来自https://github.com/blueimp/JavaScript-Load-Image）
canvas-to-blob（来自https://github.com/blueimp/JavaScript-Canvas-to-Blob）
jquery.iframe 传输
jquery.fileupload
jquery.fileupload 进程
jquery.fileupload-image

然后您可以像这样（在 CoffeeScript 中）将预览图像插入 DOM：

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

如果它不起作用，请仔细检查您是否包含所有依赖项的最新版本。

【讨论】：