JavaScript 之 使用 XMLHttpRequest 预览文件（图片）

1 <div id="div1">

2             <input type="file" id="uploadfile" style="width: 100px; height: 25px;" />

3             <input id="b1" type="button" value="上传" style="display: inline-block; width: 40px; height: 25px;" />

4             <img id="img1" src="" />

5         </div>

 

 1 window.onload = function () {

 2     document.getElementById("uploadfile").addEventListener("change", function () {

 3         //1、获取所选的文件 暂时只选一个

 4 

 5         var filereader = new FileReader();

 6         filereader.onloadend = function (event) {

 7             console.log("a");

 8             var filedata = event.target.result;

 9             document.getElementById("img1").src = filedata;

10         }

11        

12         var file = document.getElementById("uploadfile").files[0];

13         filereader.readAsDataURL(file);

14     }, true);

15 }