A preview code found on the Internet to preview the file before uploading, reproduced from JavaScript images before uploading (compatible with all browsers)
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> #preview, .img, img { width: 200px; height: 200px; } #preview { border: 1px solid #000; } </style></head><body> <div id="preview"></div> <input type="file" onchange="preview(this)" /> <script type="text/javascript"> function preview(file) { var prevDiv = document.getElementById('preview'); if (file.files && file.files[0]) { var reader = new FileReader(); reader.onload = function(evt) { prevDiv.innerHTML = '<img src="' + evt.target.result + '" />'; } reader.readAsDataURL(file.files[0]); } else { prevDiv.innerHTML = '<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=/'' + file.value + '/'"></div>'; } } </script></body></html>Key points of implementation
● For Chrome, Firefox, and IE10, use FileReader to implement it.
● For IE6~9, use filter filter:progid:DXImageTransform.Microsoft.AlphaImageLoader to implement it.
I tested IE8+ without any problems. However, the file path splitting line of the file.value in IE7 was removed by the browser and the file path splitting line was not displayed
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.