input file 上传图片显示上传的文件

 1 <input type="file" id="upload">
 2 <img id="qrcode">
 3 
 4   var upload = document.querySelector("#upload");
 5   var qrcode= document.querySelector("#qrcode");
 6 
 7  upload.addEventListener("change", function () {
 8           var objUrl = getObjectURL(this.files[0]);
 9 
10           if (objUrl) {
11             qrcode.setAttribute("src", objUrl);
12            
13         }
14      });
15   };
16     
17   function getObjectURL(file) {
18           var url = null;
19           if (window.createObjectURL != undefined) {
20             url = window.createObjectURL(file);
21           } else if (window.URL != undefined) {
22             // mozilla(firefox)
23             url = window.URL.createObjectURL(file);
24           } else if (window.webkitURL != undefined) {
25             // webkit or chrome
26             url = window.webkitURL.createObjectURL(file);
27           }
28           return url;
29         }

onchange事件中拿到file信息,createObjectURL 创建图片链接~

猜你喜欢

转载自www.cnblogs.com/Frank-f/p/12795900.html