js支持全瀏覽器的文件上傳預覽

時間 2019-11-18

標籤支持瀏覽器文件上傳預覽欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>javascript

<html>css

<head>html

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />java

<style type="text/css">瀏覽器

#preview,測試

.img,ui

img {this

width: 200px;code

height: 200px;orm

}

#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 class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';

}

</script>

</body>

</html>

實現要點 ● 對於 Chrome、Firefox、IE10 使用 FileReader 來實現。 ● 對於 IE6~9 使用濾鏡 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 來實現。測試了一下IE8+都沒有問題。可是IE7下file.value被瀏覽器去掉了文件路徑分割線從而顯示不出來