Skip to content

Instantly share code, notes, and snippets.

@zikkeung

zikkeung/Html5實現末上傳圖片即可預覽.html

Last active November 26, 2019 07:25
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zikkeung/092b485f2e75c0fbd351 to your computer and use it in GitHub Desktop.
Save zikkeung/092b485f2e75c0fbd351 to your computer and use it in GitHub Desktop.
Download ZIP
|-|{"files":{"Html5實現末上傳圖片即可預覽.html":{"env":"plain"},"readAsDataURL":{"env":"plain"}},"tag":"Uncategorized"}
Raw
Html5實現末上傳圖片即可預覽.html
<!DOCTYPE html>
<html>
<head>
<title>Image preview on realtime</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<h3>即時預覽Image</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" /><br>
<img src="" id="img0" >
</form>
<script>
/**
* 使用HTML5 File API, 來即時預覽image
*/
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
}
}) ;
/**
* 建立一個可存取到該file的url
* PS: 瀏覽器必須支援HTML5 File API
*/
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 ;
console.log( url )
}
</script>
</body>
</html>
Raw
readAsDataURL
<!DOCTYPE html>
<html>
<head>
<title>Image preview on realtime</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<h3>即時預覽Image</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" /><br>
<img src="" id="img0" >
</form>
<script>
/**
* 使用HTML5 File API, 來即時預覽image
*/
$("#file0").change(function(){
var reader = new FileReader();
reader.onload = function (event) {
$("#img0").attr("src", event.target.result) ;
}
reader.readAsDataURL(this.files[0]);
}) ;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment