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

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>

 

 

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

  1. 很满意,我们还没学到这,请问那个图片的样式要怎么改啊,我设定了 60,60的大小可一换图就变样了

发表评论

电子邮件地址不会被公开。 必填项已用*标注

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