HTML5圖片預覽需要用到兩種方法 1.URL 2.FileReader直接上碼 複製程式碼程式碼如下: 程式碼如下:程式碼如下:程式碼如下:程式碼如下:> HTML> html> html5 圖片上傳預覽 <br /> #preview {<br /> width: 300px;<br /> height: 300px;<br /> overflow: hidden;<br /> }<br /> #preview img {<br /> width: 100%;<> height: 100%; 🎜> <br /> function preview1 (file) {<br /> var img = new Image(), url = img.src = URL.createObjectURL(file)<br /> var $img = $(img)<br /> img.onload = function() {<br /> URL.revokeObjectURL(url)<br /> $('#preview').empty().append($img)<br /> }<br /> }<br /> function preview2(file) {<br /> var reader = new FileReader()<br /> reader.onload = function(e) {<br /> var $img = $('<img alt="HTML5圖片預覽實例分享_html5教學技巧" >').attr("src", e.target.result)<br /> $( '#preview').empty().append($img)<br /> }<br /> reader.readAsDataURL(file)<br /> }<br /> <br /> $(function() {<br /> $('> <br /> $(function() {<br /> $(' [type=file]').change(function(e) {<br /> var file = e.target.files[0]<br /> preview1(file)<br /> })<br /> })
