1.HTML
<img id="preview" />
<br />
<input type="file" id="filePicker"/>
2.js
var upLoadControl = function() {
var filePicker = document.getElementById('filePicker')
filePicker.addEventListener('change', function(e) {
console.log('come in');
if(window.FileReader) {
console.log('y');
} else {
console.log('n');
alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
return false;
}
var file = e.target.files[0];
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像文件");
return false;
}else {
previewPic(file);
}
})
}();
function previewPic(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var img = document.getElementById("preview");
img.src = e.target.result;
}
}
3.效果
4.说明
这个属性还是蛮好用的，h5属性，在能兼容h5属性的机器上使用
