HTML5圖片預覽
阿新 • • 發佈:2017-08-31
jquery image Enctype htm syn form dataurl num orm
作者:Snandy
兩種方式實現
- URL
- FileReader
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE HTML>
<html>
<head>
<meta charset= "utf-8" >
<title>html5 圖片上傳預覽</title>
<style>
#preview {
width: 300px;
height: 300px;
overflow: hidden;
}
#preview img {
width: 100%;
height: 100%;
}
</style> <script src= "../jquery/jquery-1.8.3.js" ></script>
<script type= "text/javascript" >
function preview1(file) {
var img = new Image(), url = img.src = URL.createObjectURL(file)
var $img = $(img)
img.onload = function () {
URL.revokeObjectURL(url)
$( ‘#preview‘ ).empty().append($img)
}
}
function preview2(file) {
var reader = new FileReader()
reader.onload = function (e) {
var $img = $( ‘<img>‘ ).attr( "src" , e.target.result)
$( ‘#preview‘ ).empty().append($img)
}
reader.readAsDataURL(file)
}
$( function () {
$( ‘[type=file]‘ ).change( function (e) {
var file = e.target.files[0]
preview1(file)
})
})
</script>
</head>
<body>
<form enctype= "multipart/form-data" action= "" method= "post" >
<input type= "file" name= "imageUpload" />
<div id= "preview" style= "width: 300px;height:300px;border:1px solid gray;" ></div>
</form>
</body>
</html>
|
URL.revokeObjectURL方法Opera不支持,FileReader除IE9及以下不支持,其它瀏覽器都支持。
相關:
https://developer.mozilla.org/en-US/docs/DOM/window.URL.createObjectURL
https://developer.mozilla.org/en-US/docs/DOM/window.URL.revokeObjectURL
HTML5圖片預覽