js多圖片上傳

kviccn 發(fā)布于2019-08-22 16:02 / 532人閱讀

摘要：多圖片上傳這兩天用原生徒手擼了個插件，寫的不是很完美，在這里先介紹一下傳統(tǒng)的面向過程的寫法，還有很多不足，希望多多指正使用到的技術(shù)使用對象更靈活操作需要發(fā)送的表單文件使用對象允許應(yīng)用程序異步操作本地文件將讀取的文件轉(zhuǎn)換為編碼的字符串文件讀取

Multi多圖片上傳

這兩天用原生徒手擼了個插件，寫的不是很完美，在這里先介紹一下傳統(tǒng)的面向過程的javascript寫法，還有很多不足，希望多多指正

使用到的技術(shù)

使用formDate對象：更靈活操作需要發(fā)送的表單文件

使用FileReader對象:允許web應(yīng)用程序異步操作本地文件

FileReader.readAsDataURL()將讀取的文件轉(zhuǎn)換為base64編碼的字符串

FileReader.onload()文件讀取時觸發(fā)該方法

FileReader.onerror()文件讀取錯誤時觸發(fā)該方法

可以參考MDN提供的API https://developer.mozilla.org...

關(guān)鍵函數(shù)

1.文件變動操作

//onchange只有在文件發(fā)生改動的時候會調(diào)用
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.文件格式、大小、數(shù)量、重復(fù)等檢測

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+",文件重復(fù)");
        isLegal = false;
    }
    if(fileData.length>=max){
        console.log("文件數(shù)量超出，最多上傳"+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.創(chuàng)建圖片縮略圖(縮略圖點擊刪除)(可省略)

我這里是為了更直觀地看到上傳效果

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; //標識當前l(fā)i元素
        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

好像有點多啊，這是我初步的代碼，封裝好的完整的代碼在我的github上
有興趣的可以去看看,大家多多批評
https://github.com/mqr123/too...

GPU云服務(wù)器云服務(wù)器 js 數(shù)據(jù)多圖片一起上傳 php多圖片上傳 java上傳多圖片 js 多文件上傳

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93988.html

發(fā)表評論

登陸后可評論

0條評論

kviccn

男|高級講師

我要關(guān)注我要私信

TA的文章

UCloud快杰云主機年度大促，低至1折！

閱讀 3602·2020-12-03 17:42
前端每日實戰(zhàn)：144# 視頻演示如何用 D3 和 GSAP 創(chuàng)作一個集體舞動畫

閱讀 2770·2019-08-30 15:54
前端面試每日 3+1 —— 第123天

閱讀 2228·2019-08-30 15:44
JavaScript數(shù)組方法

閱讀 575·2019-08-30 14:08
ABAP正則表達式 vs SPLIT INTO

閱讀 974·2019-08-30 14:00
CSS布局

閱讀 1108·2019-08-30 13:46
使用React和Node.js制作音樂類App的一次總結(jié)

閱讀 2793·2019-08-29 18:33
iOS Safari瀏覽器上overflow: scroll元素無法滑動bug解決方法整理

閱讀 2910·2019-08-29 14:11

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

js多圖片上傳

1.文件變動操作

2.文件異步讀取

3.文件上傳

4.文件格式、大小、數(shù)量、重復(fù)等檢測

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

6.創(chuàng)建圖片縮略圖(縮略圖點擊刪除)(可省略)

7.上傳操作(ajax封裝)

相關(guān)文章

文件上傳的幾種方法——plupload篇

用element的upload組件實現(xiàn)多圖片上傳和壓縮

基于Vue + Node.js + MongoDB的圖片上傳組件，實現(xiàn)圖片的預(yù)覽和刪除

前端文件上傳(js/vue.js/axios/canvas圖片壓縮)

前端文件上傳(js/vue.js/axios/canvas圖片壓縮)

發(fā)表評論

0條評論

kviccn

男|高級講師

TA的文章

UCloud快杰云主機年度大促，低至1折！

前端每日實戰(zhàn)：144# 視頻演示如何用 D3 和 GSAP 創(chuàng)作一個集體舞動畫

前端面試每日 3+1 —— 第123天

JavaScript數(shù)組方法

ABAP正則表達式 vs SPLIT INTO

CSS布局

使用React和Node.js制作音樂類App的一次總結(jié)

iOS Safari瀏覽器上overflow: scroll元素無法滑動bug解決方法整理

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

js多圖片上傳

1.文件變動操作

2.文件異步讀取

3.文件上傳

4.文件格式、大小、數(shù)量、重復(fù)等檢測

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

6.創(chuàng)建圖片縮略圖(縮略圖點擊刪除)(可省略)

7.上傳操作(ajax封裝)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

4.文件格式、大小、數(shù)量、重復(fù)等檢測