最新消息:学自己之所学,想自己之所想,追寻心中最深处的梦想。

Javascript/js兼容各个浏览器的本地图片上传即时预览效果

程序编码 pony_chiang 2967浏览 0评论

js

   function change() {
        var pic = document.getElementById("preview");
        var file = document.getElementById("f");
		var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
		// gif在IE浏览器暂时无法显示
		if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
			alert("文件必须为图片!"); return;
		}
		// IE浏览器
        if (document.all) {

            file.select();
            var reallocalpath = document.selection.createRange().text;
			var ie6 = /msie 6/i.test(navigator.userAgent);
			// IE6浏览器设置img的src为本地路径可以直接显示图片
            if (ie6) pic.src = reallocalpath; 
            else { 
				// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现
                pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
				// 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
                pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
            }
        }else{
    		html5Reader(file);
		}
    }

	function html5Reader(file){ 
		var file = file.files[0]; 
		var reader = new FileReader(); 
		reader.readAsDataURL(file); 
		reader.onload = function(e){ 
			var pic = document.getElementById("preview");
			pic.src=this.result;
		} 
	}

 

html

<form enctype="multipart/form-data" name="form1">
上传文件:<input id="f" type="file" name="f" onchange="change()" />

预览:<img id="preview" alt="" name="pic" />
</form>

 

 

转载请注明:markdream » Javascript/js兼容各个浏览器的本地图片上传即时预览效果

发表我的评论
取消评论

评论审核已启用。您的评论可能需要一段时间后才能被显示。

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (5)

  1. 试过了,可靠,多谢分享!以前还专门去找过这段代码,最后也没找到可以实现的方式。
    孤注一2013-12-26 15:59 回复
  2. 很满意,我们还没学到这,请问那个图片的样式要怎么改啊,我设定了 60,60的大小可一换图就变样了
    谢谢2014-04-28 19:08 回复
  3. 学习了
    玲玲2014-05-05 16:47 回复
  4. ie下报错,script5:拒绝访问。请问该如何解决?
    zili2014-11-12 14:27 回复
  5. 你好 我想问问这个不兼容IE9 该怎么解决啊
    2015-11-10 11:12 回复