javascript实现的图片预览和上传功能示例【兼容IE 9】
本文实例讲述了javascript实现的图片预览和上传功能。分享给大家供大家参考,具体如下:
下载demo:https://github.com/captainliao/zujian/tree/master/upload
对于现代浏览器来说,要实现图片预览非常简单:
1、filereader.readasdataurl(file)
2、window.url.createobjecturl(file)
以上两种方法分别可以得到一个base64和一个blob对象的url地址,从而实现预览。但是,他们只支持在ie10+,显然这是不够的,如何实现低版本ie浏览器的图片预览呢?代码如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" language="javascript"> $('#preview_fake').change(function () { previewimg($(this), $('#preview')); }); function previewimg($inputid, $previewid) { var inputid = $inputid[0], previewid = $previewid[0]; $previewid.empty(); if(/msie/.test(navigator.useragent.tolowercase())){ if($.support.version == 6.0){ $previewid.attr("src",inputid.value); }else{ inputid.select(); var reallocalpath = document.selection.createrange().text; previewid.style.filter = "progid:dximagetransform.microsoft.alphaimageloader(enabled=true, sizingmethod='scale',src=\"" + reallocalpath + "\")"; // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片 previewid.src = 'data:image/gif;base64,r0lgodlhaqabaiaaap///waaach5baeaaaaalaaaaaabaaeaaaicraeaow=='; } }else { $previewid.attr("src",window.url.createobjecturl(previewfake.files[0])); } } </script> </head> <body> <form id="form1" runat="server"> <div> 选择图片:<input type="file" size="20" id='preview_fake'" /> </div> <div id="preview" style="width: 300px; height: 300px"> </div> </form> </body> </html>
这样,我们就能够在ie10- 下预览上传的图片了。
在这里,有必要对几个参数说明一下,以免后人再入坑!
progid:dximagetransform.microsoft.alphaimageloader([enabled=benabled ,] [sizingmethod=ssize ,] src=surl)
enabled: 可选。布尔值(boolean)。设置或检索滤镜是否激活。
- true:默认值。滤镜激活。
- false:滤镜被禁止。
sizingmethod:可选。字符串(string)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
- crop:剪切图片以适应对象尺寸。
- image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
- scale:缩放图片以适应对象的尺寸边界。
src: 必选项。字符串(string)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。
以上,可以实现低版本ie浏览器的图片预览,但要上传到服务器还需要一番周折。对于单张图片,可以通过<form>
表单提交,但对于多张图片,这需要flash技术的支持,实现起来相当麻烦。
这里,楼主推荐一个现有的*: 组件。
上一篇: php上传文件问题汇总