js實現多文件上傳（一）-- 圖片轉base64回顯

這裏實現的是用<input type='file'>元素實現多文件上傳

演示地址

第一步：

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:

<style>
       .file-list{
           padding: 20px;
           background: lightblue;
           list-style-type: none;
       }
        .file-list img{
            max-width: 70px;
            vertical-align: middle;
        }
        .file-list .file-item{margin-bottom: 10px}
        .file-list .file-item .file-name{margin-left: 20px}
        .file-list .file-item .file-del{
            color: red;
            margin-left: 200px;}
    </style>

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('<li class="file-item"><img src="'+this.result+'" alt=""><span class="file-name">'+file.name+'</span><span class="file-del">刪除</span></li>') }else{ $list.append('<li class="file-item"><span class="file-name">'+file.name+'</span><span class="file-del">刪除</span></li>') } } }

 

點擊刪除按鈕事件：

$(".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