js实现多文件上传（一）-- 图片转base64回显

这里实现的是用元素实现多文件上传

演示地址

第一步：

html:

input元素加上mutiple属性

<form >
    <div>
        <input type="file" id="choose-file" multiple>
        <a href="javascript:;" id="upload">上传a>
    div>
    <ul class="file-list">
    ul>
form>

css:

View Code

第二步：

js:

声明变量

var $button = $('#upload'),
         //选择文件按钮
         $file = $("#choose-file"),
         //回显的列表
         $list = $('.file-list'),
         //选择要上传的所有文件
         fileList = [],
         sendList = [];
     //当前选择上传的文件
     var curFile ;

 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.

 

 $file.on('change',function(){       
//原生的文件对象，相当于$file.get(0).files[0];
         curFile = this.files;
         //将FileList对象变成数组
         fileList = fileList.concat(Array.from(curFile));
         for(var i=0,len = curFile.length;i < len;i++){
             reviewFile(curFile[i])
         }

     })
     function reviewFile(file){
         //实例化fileReader,
         let  fd = new FileReader();
         //获取当前选择文件的类型
         let fileType = file.type;
         //调它的readAsDataURL并把原生File对象传给它，
         fd.readAsDataURL(file);//base64
         //监听它的onload事件，load完读取的结果就在它的result属性里了

         fd.onload = function(){

             if(/^image\/[jpeg|png|jpg|gif]/.test(fileType)){
                 $list.append('
this.result+'" alt="">'+file.name+'删除
')
             }else{
                 $list.append('
'+file.name+'删除
')
             }
         }
     }

 

点击删除按钮事件：

$(".file-list").on('click','.file-del',function(){
         let $parent = $(this).parent();
         let index = $parent.index();
         fileList.splice(index,1);
         $parent.remove()
     });

View Code

点击上传按钮事件：

 $button.on('click',function(){

         if(fileList.length>0){
             for(var i=0,len = fileList.length;i < len;i++){
                 let formData = new FormData();
                 formData.append('file',fileList[i]);
                 $.ajax({
                     url:'/oss/file/uploadFiles',
                     type:'post',
                     data:formData,
                     processData:false,
                     contentType:false,
                     success:function(data,statusText,headers){
                         if(data.success){
                             var filed = data.data[0];
                             sendList.push(filed);
                         }
                     }
                 })
             }

         }else{
             alert("请选择文件！")
         }
         return false;

     })

View Code

 

转载于:https://www.cnblogs.com/lizimeme/p/8086753.html