<!DOCTYPE html> |
<html> |
<head> |
<title>HTML5上传图片预览</title> |
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" > |
<script src= "http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" ></script> |
</head> |
<body> |
<h3>请选择图片文件:JPG/GIF</h3> |
<form name= "form0" id= "form0" > |
<input type= "file" name= "file0" id= "file0" multiple= "multiple" /><br><img src= "" id= "img0" > |
</form> |
<script> |
$( "#file0" ).change( function (){ |
var objUrl = getObjectURL( this .files[0]) ; |
console.log( "objUrl = " +objUrl) ; |
if (objUrl) { |
$( "#img0" ).attr( "src" , objUrl) ; |
} |
}) ; |
//建立一個可存取到該file的url |
function getObjectURL(file) { |
var url = null ; |
if (window.createObjectURL!=undefined) { // basic |
url = window.createObjectURL(file) ; |
} else if (window.URL!=undefined) { // mozilla(firefox) |
url = window.URL.createObjectURL(file) ; |
} else if (window.webkitURL!=undefined) { // webkit or chrome |
url = window.webkitURL.createObjectURL(file) ; |
} |
return url ; |
} |
</script> |
</body> |
</html> |