html预览选择的图片大小,如何用HTML 5中的文件API实现图片选择预览效果

选择图片预览示例

(function () {

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

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

function viewFile (file) {

//通过file.size可以取得图片大小

var reader = new FileReader();

reader.onload = function( evt ){

viewImg.src = evt.target.result;

}

reader.readAsDataURL(file);

}

viewFiles.addEventListener("change", function () {

//通过 this.files 取到 FileList

viewFile(this.files[0]);

}, false);

})();