关于图片上传的预览:
在html5之前,页面隐藏iframe和form,将图片上传到服务器(提交给了iframe,form有一个target属性),返回图片地址,展示在iframe中。
html5给我们提供了一个 'FileReader' API,可以在选择图片后,获取本地的图片文件,从而实现预览。
可直接查看FileReader API文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
(项目中,老早使用了,但是没笔记,忘记在哪里查找的资料,再次翻看找到了,这次笔记下!!)
打开文档,有demo,而且有个链接 'IE10以下的版本不支持FileReader()构造函数.不过可以利用滤镜来兼容旧版本的IE:兼容IE的图片本地预览.'。可点击开,然后查看源代码,看如何兼容IE10一下,这里我直接黏贴下项目中使用的代码:
$('#file').change(function(event){
var file = event.target.files[0];
var image_type = /^(?:image\/gif|image\/jpeg|image\/pipeg|image\/png)$/i;
// var image_type = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
if(!image_type.test(file.type)){
layer.msg('只能上传jpg、png、git格式的图片!'); // 使用的是 '贤心的layer' 弹窗插件
return false;
}
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function(event){
$('#preview').attr('src', event.target.result);
}
reader.readAsDataURL(file);
}
// IE10以下,使用滤镜
if (navigator.appName === "Microsoft Internet Explorer") {
$('#preview').html('');
$('#preview').eq(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = $("#file").val();
}
});
网上这种文章很多,这里记录上一篇,感觉还不错:
http://leonshi.com/2015/11/18/html5-filereader-preview-upload/
上传图片,实现图片预览
最新推荐文章于 2019-04-25 11:46:45 发布