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被浏览器去掉了文件路径分割线从而显示不出来