html5 原生图片上传,jquery+html5实现单张图片上传预览

js：

if (window.File && window.FileReader && window.FileList && window.Blob){

//Blob是计算机界通用术语之一，全称写作：BLOB (binary large object)，表示二进制大对象。

//全部支持

function handleFileSelect(evt) {

var files = evt.target.files, f = files[0];

if (!/image\/\w+/.test(f.type)){

alert("请确保文件为图像类型");

return false;

}

var reader = new FileReader();

reader.onload = (function(theFile) {

return function(e) {

var show_pic = document.getElementById("show_pic");

show_pic.src = e.target.result;

};

})(f);

reader.readAsDataURL(f);

}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

}else {

alert('该浏览器不全部支持File APIs的功能');

}

html：