javascript实现的图片预览和上传功能示例【兼容IE 9】
程序员文章站
2022-06-07 23:04:08
本文实例讲述了javascript实现的图片预览和上传功能。分享给大家供大家参考，具体如下：下载demo：https://github.com/captainliao/zujian/tree/mast...
本文实例讲述了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技术的支持，实现起来相当麻烦。
这里，楼主推荐一个现有的*： 组件。