Bootstrap Coder
bootstrap一个美丽的前端框架,努力让他更完美。
js上传图片本地图片预览

通过表单file上传文件时,需要做预览。这里介绍不用ajax上传之后返回url在进行预览的方法。直接预览本地文件。


<script type="text/javascript"> 
/** 
* 从 file 域获取 本地图片 url 
*/ 
function getFileUrl(sourceId) { 
	var url; 
	if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
		url = document.getElementById(sourceId).value; 
	} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
		url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
	} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
		url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
	} 
	return url; 
} 
/** 
* 将本地图片 显示到浏览器上 
*/ 
function preImg(sourceId, targetId) { 
	var url = getFileUrl(sourceId); 
	var imgPre = document.getElementById(targetId); 
	imgPre.src = url; 
} 
</script> 
<form action=""> 
	<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> 
	<img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> 
</form> 
<< 上一篇 Nginx报错403 forbidden (13: Permission denied)的解决办法 chrome 不支持 lodop 下一篇 >>
文章标签
随意 | Created At 2014 By William Clinton | 蜀ICP备14002619号-4 |