新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

元素上选择文件后返回的FileList对象

简介

选用FileReader对象,web应用程序能够异步的读取存款和储蓄在用户计算机上的文件(大概原有数据缓冲)内容,能够行使File对象大概Blob对象来钦点所要管理的文本或数据.当中File对象足以是来源于用户在贰个<input type="text" />成分上选用文件后重返的FileList对象,也得以来自拖放操作生成的 DataTransfer对象,还是能是源于在贰个HTMLCanvasElement上施行mozGetAsFile()方法后的归来结果.

图片 1

图片 2

页面中四个,上传七个图片DEMO代码

<!Doctype html>
<html>
 <head>
  <title>上传图片显示预览图</title>
  <style>
   #result img{
    height:100px;
    display:inline-block;
    margin-right:10px;
    margin-bottom:10px;
   }
  </style>
 </head>
 <body>
  <div class="add_imgs">
   <p> 
    <label>请选择一个图像文件:</label> 
    <input type="file" id="file_input" style="display:none;" /> 
   </p> 
   <div id="result">
    <a href="javascript:void(0);" class="add_img_btn">添加图片</a>
   </div> 
  </div>
  <div class="add_imgs">
   <p> 
    <label>请选择一个图像文件:</label> 
    <input type="file" id="file_input" style="display:none;" /> 
   </p> 
   <div id="result">
    <a href="javascript:void(0);" class="add_img_btn">添加图片</a>
   </div> 
  </div>
  <script src="jquery-2.2.1.min.js"></script>
  <script>
   $(".add_img_btn").unbind("click").on("click",function(){
    $(this).parents(".add_imgs").find("input[type=file]").click();
    var result = $(this).parent(); 
    var input = $(this).parents(".add_imgs").find("input[type=file]");
    dads(result,input);
   })


   function dads(result,input){
    if(typeof FileReader==='undefined'){ 
     result.innerHTML = "抱歉,你的浏览器不支持 FileReader"; 
     input.setAttribute('disabled','disabled'); 
    }else{ 
     $(input).unbind("change").on("change",function(){
      var file = this.files[0]; 
      if(!/image/w /.test(file.type)){ 
       alert("文件必须为图片!"); 
       return false; 
      } 
      var reader = new FileReader(); 
      reader.readAsDataURL(file); 
      reader.onload = function(e){ 
       $(result).append('<img src="' this.result '" alt="图片 3" />'); 
      } 
     })
    } 
   }
  </script>
 </body>
</html>

如上便是本文的全部内容,希望对大家学习JavaScript程序设计有着扶助。

你也许感兴趣的稿子:

  • JavaSctit 利用FileReader和滤镜上传图片预览成效
  • JavaScript中的FileReader图片预览上传作用达成代码
  • JS HTML5 FileReader落成公文上传前本地预览功效
  • JavaScript html5行使FileReader达成上传功用
  • javascript HTML5文本上传FileReader API
  • 借助FileReader落成将文件编码为Base64后透过AJAX上传
  • 座谈基于iframe、FormData、FileReader二种无刷新上传文件的措施
  • javascript结合fileReader 完毕上传图片
  • File, FileReader 和 Ajax 文件上传实例深入分析(php)
  • JavaScript使用FileReader实现图片上传预览效果

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:元素上选择文件后返回的FileList对象

您可能还会对下面的文章感兴趣: