猿问

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

如何用HTML 5中的文件API实现图片选择预览效果，如图所示。

慕姐8265434
浏览 866回答 1
1回答

UYOU

<!DOCTYPE html><html><head>&nbsp;&nbsp;&nbsp; <meta charset="UTF-8">&nbsp;&nbsp;&nbsp; <title>选择图片预览示例</title></head><body><div><input id="viewFiles" type="file"/></div><img id="viewImg" src="" style="max-width:500px"/><script type="text/javascript">&nbsp;&nbsp;&nbsp; (function () {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var viewFiles = document.getElementById("viewFiles");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var viewImg = document.getElementById("viewImg");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function viewFile (file) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //通过file.size可以取得图片大小&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var reader = new FileReader();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; reader.onload = function( evt ){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; viewImg.src = evt.target.result;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; reader.readAsDataURL(file);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; viewFiles.addEventListener("change", function () {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //通过 this.files 取到 FileList&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; viewFile(this.files[0]);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, false);&nbsp;&nbsp;&nbsp; })();</script></body></html>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答