JavaScript实现图片预览与上传功能(兼容IE9)
本文介绍利用JavaScript实现图片预览及上传功能的方法。针对现代浏览器,使用FileReader或createObjectURL生成Base64或Blob URL进行预览;针对IE10以下版本,通过AlphaImageLoader滤镜实现兼容。上传方面,单图可使用FormData提交,多图推荐WebUploader组件。
图片预览与上传功能概述
本文详细介绍如何使用JavaScript实现图片预览与上传功能。
相关DEMO代码已托管至GitHub:https://github.com/CaptainLiao/zujian/tree/master/Upload
现代浏览器图片预览实现
在现代浏览器中,实现图片预览功能相对简单,主要依赖以下两种API:
1、调用fileReader.readAsDataURL(file)方法
2、使用window.URL.createObjectURL(file)方法
上述两种方法分别返回Base64编码字符串和Blob对象的URL地址,从而完成图片预览。然而,这两种方式仅支持IE10及以上版本,无法满足低版本IE浏览器的需求。针对低版本IE的图片预览,具体实现代码如下:
低版本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技术,实现过程较为复杂。
在此推荐一个成熟的解决方案:WebUploader组件。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述的实现方案对JavaScript程序设计有所帮助。
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
