html5實現圖片上傳預覽
阿新 • • 發佈：2018-11-07
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #test-image-preview{ height: 500px; width: 80%; } </style> </head> <body> <input type="file" name="test-image-file" id="test-image-file" value="" multiple="multiple"/> <div id="test-file-info"></div> <div id="test-image-preview"></div> <script> var fileInput = document.getElementById('test-image-file'), info = document.getElementById('test-file-info'), preview = document.getElementById('test-image-preview'); // 監聽change事件: fileInput.addEventListener('change', function () { // 清除背景圖片: preview.style.backgroundImage = ''; // 檢查檔案是否選擇: if (!fileInput.value) { info.innerHTML = '沒有選擇檔案'; return; } // 獲取File引用: var file = fileInput.files[0]; // 獲取File資訊: info.innerHTML = '檔案: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate; if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') { alert('不是有效的圖片檔案!'); return; } // 讀取檔案: var reader = new FileReader(); reader.onload = function(e) { var data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...' preview.style.backgroundImage = 'url(' + data + ')'; }; // 以DataURL的形式讀取檔案: reader.readAsDataURL(file); }); </script> </body> <!--<script src="js/dtm.js" type="text/javascript" charset="utf-8"></script>--> </html>