天天看點

js圖檔上傳擷取本地位址預覽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<script type="text/javascript"> 

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> 

</head> 

<body> 

<form action=""> 

<input type="file" name="imgOne" id="imgOne" οnchange="preImg(this.id,'imgPre');" /> 

<img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> 

</form> 

</body> 

</html> 

繼續閱讀