您当前的位置：主页 > 技术探讨 >

jq处理文件上传问题reader问题

时间：2018-01-27 11:56 日记人：arlen.zhou

FileReader 获取图片的base64 代码 并预览

FileReader ,在这里只是记录使用方法。

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file（blob）	将文件读取为二进制码
readAsDataURL	file（blob）	将文件读取为 DataURL
readAsText	file, （blob）	将文件读取为文本

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取



<script>
  jQuery(document).ready(function($) {
    $('#file').on('change',function(){
            if($('#file').val()){
              var fileName=$('#file').val();           //获取文件 
              var suffix = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();  //截取文件格式
             
              if(suffix!='png'&&suffix!='jpg'){        //图片验证功能
                  $('#file').val('');
                  alert('请选择图片');             
              }
 
              // 处理图片文件 
              handle();
            } 
    })
      function handle(){    
          var imgBox=$('#imgBox');
          var file=document.querySelector('input[type=file]').files[0];  // 获取文件信息
          var reader=new FileReader();       //文件处理方法
          
          reader.onloadend=function(){    
              imgBox.append('<img src="'+reader.result+'" />');           
          }
          if(file){
            reader.readAsDataURL(file);
          }else{
            imgbox.append(' ');
          }
      }
  });
 </script>