您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了javascript如何实现图片预览和上传功能，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
对于现代浏览器来说，要实现图片预览非常简单：
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" >
</div>
</form>
</body>
</html>这样，我们就能够在IE10- 下预览上传的图片了。
在这里，有必要对几个参数说明一下，以免后人再入坑！
progid:DXImageTransform.Microsoft.AlphaImageLoader([enabled=bEnabled ,] [sizingMethod=sSize ,] src=sURL)
enabled： 可选。布尔值(Boolean)。设置或检索滤镜是否激活。
sizingMethod：可选。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
src： 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
以上，可以实现低版本IE浏览器的图片预览，但要上传到服务器还需要一番周折。对于单张图片，可以通过<form>表单提交，但对于多张图片，这需要flash技术的支持，实现起来相当麻烦。
这里，楼主推荐一个现有的轮子：webuploader 组件。
看完上述内容，是不是对javascript如何实现图片预览和上传功能有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。