標籤:lsp type=file 方法 idt append contain tab rip http
Snandy
兩種方式實現
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 |
<!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圖片預覽