jQuery文件上传预览图像

我正在使用jQuery文件上传插件（ http://blueimp.github.io/jQuery-File-Upload/ ）为我的网站上传图片。 我查看了（ https://github.com/blueimp/jQuery-File-Upload/wiki/Options ），但我没有找到分配元素来显示图像的设置。 那么，如何使用此插件在网页上预览图像？

谢谢。

Answer 1

我不认为Jquery File Upload插件提供预览function。

但您可以轻松地将其实现到插件的添加选项中：

add: function (e, data) { if (data.files && data.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#target').attr('src', e.target.result); } reader.readAsDataURL(data.files[0]); ... data.submit(); } } 

没有BlueImp插件的直播例子。

Answer 2

该插件确实支持图像预览，但我正在试图弄清楚如何将其调整为更高的分辨率。 您可以通过执行以下操作来访问预览：

 $('.fileupload-field') .fileupload({ disableImageResize: false, previewMaxWidth: 320, previewMaxHeight: 320 }) .bind('fileuploadprocessalways', function(e, data) { var canvas = data.files[0].preview; var dataURL = canvas.toDataURL(); $("#some-image").css("background-image", 'url(' + dataURL +')'); }) 

Answer 3

“IE-9不支持文件阅读器API，因此要预览图像，请执行以下步骤：

1>使用ajax> 2>将图像发送到服务器上传后作为响应3>从服务器获取图像源>使用图像源，将其附加到预览图像标签“