【兼容IE 9】javascript实现的图片预览和上传功能示例

【兼容IE 9】javascript实现的图片预览和上传功能示例

5
2020-05-27 17:08:34

本文实例讲述了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技术的支持,实现起来相当麻烦。

【兼容IE 9】javascript实现的图片预览和上传功能示例 (https://www.wpmee.com/) javascript教程 第1张

喜欢这个文章就点个赞分享给好友吧~

END

发表评论

一次支付终身使用
免费版本更新
靠谱的技术支持