利用HTML5的特性实现本地预览，在HTML5中添加的属性
FileReader
实现代码如下
<html>
<head>
<script>
window.onload=function()
{
document.getElementById('file').onchange = function(evt) {
// 浏览器不支持FileReader，则不处理
if (!window.FileReader) return;
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
// img 元素
document.getElementById('previewImage').src = e.target.result;
};
})(f);
reader.readAsDataURL(f);
}
}
}
</script>
</head>
<body>
<input type="file" name="" id="file" /><img id="previewImage" style="height:200px;" />
</body>
</html>效果图为：
上一篇： ThinkPHP上传多文件多类型...
下一篇： 网站名加载https...
