首页 > 技术文章 > 本地图片预览

xxlfly 2021-02-22 14:47 原文

选择本地图片后,上传前显示在界面上,实现实时预览

html 代码

  1. <form name="form1" id="form1" enctype="multipart/form-data"
  2.  
  3. <input type="submit" value=""/> 
  4. </form

js代码
 

    1. $("input[type=file]").change = function(){ 
    2.     var uploadFile = this; 
    3.     window.URL = window.URL || window.webkitURL; 
    4.     var files = uploadFile.files,img = new Image(); 
    5.     if(window.URL){ 
    6.         console.log("files[0]:::"+JSON.stringify(files[0])); 
    7.              
    8.         img.src = window.URL.createObjectURL(files[0]); 
    9.         img.width = 80; 
    10.         img.height = 79; 
    11.         img.onload = function(){ 
    12.             window.URL.revokeObjectURL(this.src); 
    13.         } 
    14.         console.log("图片大小imgSize:::"+this.files[0].size+"    img对象:::"+img.src); 
    15.         var imgSize = this.files[0].size/1024; 
    16.         if(imgSize > 614){ 
    17.             mui.toast("上传图片过大,限制不超过614K"); 
    18.             return; 
    19.         } 
    20.         isPic = true; 
    21.             $("#imgList").prepend('<div class="lis"><img src="'+img.src+'" alt="" /></div>'); 
    22.              
    23.     } 

推荐阅读