选择文件
      
      
 
     

function previewImage(file, prvid) { 	/* file：file控件 	* prvid: 图片预览容器 	*/ 	var prvbox = document.getElementById(prvid);	var tip = "请上传jpg/png/gif格式的图片文件!"; // 设定提示信息 	var filters = { 	"jpeg" : "/9j/4", 	"gif" : "R0lGOD", 	"png" : "iVBORw" 	} 	var html1 = ''+         		'
选择文件
';	if (window.FileReader) { // html5方案		var fileSize = file.files[0].size		if(fileSize>500000){			alert("请上传小于500K的文件!")			return;		}		for (var i=0, f; f = file.files[i]; i++) { 			var fr = new FileReader(); 			fr.onload = function(e) { 			var src = e.target.result; 			if (!validateImg(src)) { 				alert(tip) 				} else { 				showPrvImg(src); 			} 		} 		fr.readAsDataURL(f); 		} 		} else { // 降级处理		if ( !/\.jpg$|\.png$|\.gif$/i.test(file.value) ) { 			alert(tip); 		} else { 			var fileObj = file.files[0].size;			console.log(fileObj);			showPrvImg(file.value); 		} 	} 	function validateImg(data) { 		var pos = data.indexOf(",") + 1; 		for (var e in filters) { 			if (data.indexOf(filters[e]) === pos) { 				return e; 			} 		} 		return null; 	} 	function showPrvImg(src) { 		var img = document.createElement("img"); 		img.src = src; 		img.style.width = "270px"; 		img.style.height = "160px"; 		img.style.borderRadius = "10px"; 		//img.style.filter = 'alpha(opacity:'+50+')'; //设置IE的透明度 		//img.style.opacity = 50 / 100; //设置fierfox等透明度，注意透明度值是小数 		prvbox.innerHTML = ""; 		prvbox.appendChild(img); 		var file = $("#files").val();		var arr=file.split('\\');		console.log(arr)        var fileName=arr[arr.length-1];		console.log(fileName)		//document.getElementsByClassName('showFileName').innerHTML=fileName;         //$(".showFileName").val(fileName);        //$(".showFileName").html(fileName);		} 	}

　　直接粘代码吧;

　　然后

       上传预览的原理就是:

　　　　通过input的type=file属性和window的内置FileReader对象,利用FileReader对象的readAsDataURL方法把图片数据转成base64字符串数据,然后把这个base64字符串数据赋值给一个图片标签的src属性..

　　然后 

　　就实现预览效果啦