jQuery 文件上传预览图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21128634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery File Upload preview image
提问by user1995781
I am using jQuery File Upload plugin (http://blueimp.github.io/jQuery-File-Upload/) for image upload for my website. I have look through (https://github.com/blueimp/jQuery-File-Upload/wiki/Options), but I didn't find the setting to assign an element to display the image. So, how can I preview the image on the webpage with this plugin?
我正在使用 jQuery 文件上传插件 ( http://blueimp.github.io/jQuery-File-Upload/) 为我的网站上传图片。我已经浏览了（https://github.com/blueimp/jQuery-File-Upload/wiki/Options），但我没有找到分配元素来显示图像的设置。那么，如何使用此插件预览网页上的图像？
Thank you.
谢谢你。
回答by Fractaliste
I don't think that the Jquery File Upload plugin provides preview functionality.
我不认为 Jquery 文件上传插件提供预览功能。
But you can easily implement it into the plugin's add option:
但是您可以轻松地将其实现到插件的添加选项中：
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();
}
}
回答by Dex
The plugin does support image previews though I'm trying to figure out how to resize it to a higher resolution. You can access the preview by doing something like this:
该插件确实支持图像预览，但我正试图弄清楚如何将其调整为更高的分辨率。您可以通过执行以下操作来访问预览：
$('.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 +')');
})
回答by user3080080
" File reader API is not supported in IE-9, so to preview the image, do the following steps:
" IE-9 不支持文件阅读器 API，因此要预览图像，请执行以下步骤：
1> send the image to the server using ajax>2>Get the image source from the server after uploading as response 3> by using the image source, append it to the preview image tag "
1> 使用 ajax 将图像发送到服务器>2> 上传后从服务器获取图像源作为响应 3> 使用图像源，将其附加到预览图像标记“
