js多圖片上傳

Multi多圖片上傳

這兩天用原生徒手擼了個插件，寫的不是很完美，在這裏先介紹一下傳統的面向過程的javascript寫法，還有不少不足，但願多多指正

使用到的技術

• 使用formDate對象：更靈活操做須要發送的表單文件
• 使用FileReader對象:容許web應用程序異步操做本地文件
• FileReader.readAsDataURL()將讀取的文件轉換爲base64編碼的字符串
• FileReader.onload()文件讀取時觸發該方法
• FileReader.onerror()文件讀取錯誤時觸發該方法

能夠參考MDN提供的API https://developer.mozilla.org...

關鍵函數

1.文件變更操做

//onchange只有在文件發生改動的時候會調用
inputFile.onchange = function(){
    progress = {value:0,count:this.files.length};
    for (var i = 0; i < this.files.length; i++)readerFile(this.files,i);
}

2.文件異步讀取

function readerFile(files,index){
    var reader = new FileReader();
    var currFile =files[index];
    reader.readAsDataURL(currFile);
    if(checkFile(currFile,5)){
        reader.onload = function(e){
            currFile.result = e.target.result;
            fileData.push({  //格式整理
                name:currFile.name,
                type:currFile.type,
                size:currFile.size,
                lastModified:currFile.lastModified,
                result:currFile.result
            });
            createDOM(currFile)
            progress.value+=1;
            var num = progress.value/progress.count*100;
            if(progress.value>=progress.count){
                console.log(fileData.length+'個文件已所有讀取完成!');
            }
        }
        reader.onerror = function(){
            console.log("文件上傳失敗!");
        }
    }
}

3.文件上傳

uploadBtn.onclick = function(){
    formData = new FormData(formDom);
    formData.set("files",JSON.stringify(fileData));
    console.log(formData)
    //封裝完成 暫無接口測試
    ajax({
        url:"",
        type:"POST",
        data:formData,
        success:function(){
            console.log("上傳成功")
        },
        error:function(){
            console.log("上傳失敗")
        }
    })
}

4.文件格式、大小、數量、重複等檢測

function checkFile(currFile,max){
    var isLegal = true;
    if(['image/png','image/jpeg','image/jpg','image/gif'].indexOf(currFile.type)==-1){
        console.log('文件類型只容許：png、jpg、gif');
        isLegal = false;
    }
    if(currFile.size > 2048*1024){
        console.log('文件大小超出限制，最大容許 2 MB');
        isLegal = false;
    }
    if(fileExists(currFile.name+currFile.lastModified)){
        console.log(currFile.name+",文件重複");
        isLegal = false;
    }
    if(fileData.length>=max){
        console.log('文件數量超出，最多上傳'+max+'張圖片');
        isLegal = false;
    }
    return isLegal;
}

5.文件去重(經過文件名和文件修改時間判斷)

function fileExists(checkFlag){
    var isRepeat = false;
    console.log(fileData)
    fileData.forEach(function(f){
        if(f.name + f.lastModified === checkFlag)isRepeat = true;
    });
    return isRepeat;
}

6.建立圖片縮略圖(縮略圖點擊刪除)(可省略)

我這裏是爲了更直觀地看到上傳效果

function createDOM(currFile){
    var img = new Image();
    img.src = currFile.result;
    var li = document.createElement("li");
    li.appendChild(img);
    ul.appendChild(li);
    li.key = currFile.name + currFile.lastModified;  //給每一個縮略圖一個標識
    li.addEventListener("click",function(){
        var _li = this; //標識當前li元素
        ul.removeChild(this);
        fileData.forEach(function(f,i){
            if(f.name+f.lastModified == _li.key)fileData.splice(i,1);
        })
    })
}

7.上傳操做(ajax封裝)

這裏只作post的封裝

function ajax(options){
    var defaultOptions = {
        url:"",
        type:"",
        data:null,
        dataType:"json",
        success:function(){},
        error:function(){}
    }
    options = Object.assign({},defaultOptions,options);
    if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest();
    }else{
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                options.success();
            }else{
                options.error();
            }
        }
    }
    xhr.open(options.type,options.url,true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
    xhr.send(options.data);
}

以上的代碼是所有的js邏輯，若是想更直觀地看到效果，可將下面的html+css代碼進行ctrl+v

/*css*/
<style type="text/css">
    *{padding:0;margin:0;}
    form{padding: 30px;width: 500px;margin: 200px auto 0;box-shadow: 0 3px 20px #ddd;}
    input{display: none;}
    span#addBtn{display: inline-block;padding: 25px;background: #00A09D;border-radius: 5px;color: white;position: relative;}
    span#addBtn::after,span#addBtn::before{content:"";width: 25px;height: 3px;background: #fff;position: absolute;top: 0;left:0;bottom: 0;right: 0;margin: auto;}
    span#addBtn::before{transform: rotate(90deg);}
    div#uploadBtn{width: 150px;margin: 20px auto 0;text-align: center;color: #fff;background: #00A09D;border-radius: 5px;padding: 10px 0;}
    ul.file-box{list-style: none;margin: 30px 0;}
    ul.file-box::after{display: block;content: "";clear: both;}
    ul.file-box li{float: left;width: 18%;margin: 10px 1% 0;border-radius: 5px;overflow: hidden;text-align: center;box-shadow: 0 3px 20px #aaa;}
    ul.file-box li img{width: 90px;height:90px;vertical-align: middle;}
    /*動畫樣式*/
    .shake-btn:hover{animation: shake .5s;}
    .bigger-btn:hover{animation: bigger .4s;}
    @keyframes shake{
        0%{transform: rotate(0deg);}
        25%{transform: rotate(5deg);}
        50%{transform: rotate(-10deg);}
        75%{transform: rotate(5deg);}
        100%{transform: rotate(0);}
    }
    @keyframes bigger{
        0%{transform: scale(1);}
        49%{transform: scale(1.1);}
        51%{transform: scale(1.1);}
        100%{transform: scale(1);}
    }
</style>


<!-- html -->
<form action="" id="fileForm" method="post">
    <!--添加圖片按鈕 start-->
    <label>
        <input type="file" name="files" multiple accept="image/jpeg,image/png,image/gif"/>
        <span id="addBtn" class="bigger-btn"></span>
    </label>
    <!--添加圖片按鈕 end-->
    
    
    <!--圖片縮略圖列表 start-->
    <ul class="file-box"></ul>
    <!--圖片縮略圖列表 end-->
    
    
    <!--上傳按鈕 start-->
    <div id="uploadBtn" class="shake-btn">上傳圖片</div>
    <!--上傳按鈕 end-->
</form>

好像有點多啊，這是我初步的代碼，封裝好的完整的代碼在個人github上
有興趣的能夠去看看,你們多多批評
https://github.com/mqr123/too...