formData 無需form異步上傳多個圖片

上周幫其它公司套一下一個web端微信投票系統的后台接口，遇到了一個圖片以及視頻上傳報名的小問題，網上實現方式有很多但都不是ui上面的效果，於是自己動手改造了一個。先來看看效果圖

流程很簡單，就是點擊每一個加號瀏覽本地圖片並確定后會自動發送一個formData到后台提交圖片，成功后會返回圖片在后台的url，前端界面會在提交過程中顯示上傳進度，上傳過程會有提示,先看基本html代碼吧

      　　　　　<div class="img">
                            <i id="proTxt_3" class="upload-txt"></i>
                            <div id="proLong_3" class="upload-bar"></div>
                            <img src="" alt="" id="previewIndex_3" />
                            <input type="file" name="fileToUpload" class="fileToUpload up" accept="image/*" onchange="showPreview(this,3)" />
                        </div>

每塊div代表一個file選擇框，這里就不放另外兩個了

上傳部分使用了h5的xmlhttprequest,並監聽上傳進度(整體代碼就在這里了)：

//圖片預覽

var uploder = {

fileToUpload: document. getElementsByClassName ( "fileToUpload" ),

thumb: document. getElementsByClassName ( "thumb" )

};

imgArr = []; //傳到后台的圖片

videoUrl = '' ; //傳到后台的視頻

function showPreview (img, index) {

var file = img . files [ 0 ]; //當前文件(默認只能單選)

var len = uploder . fileToUpload .length;

var fileSize = 0 ;

if ( file .size > 1024 * 1024 ) {//獲取文件大小做相應限制

fileSize = (Math. round ( file .size * 100 / ( 1024 * 1024 )) / 100 ). toString () + 'MB' ;

console . log ( fileSize );

} else {

fileSize = (Math. round ( file .size * 100 / 1024 ) / 100 ). toString () + 'KB' ;

console . log ( fileSize );

};

if (window. FileReader ) { //文件預覽

var fr = new FileReader ();

fr . onloadend = function (e) {

for ( var i = 1 ; i <= len ; i ++ ) {

if ( i == index ) { //當前圖片索引

document. getElementById ( 'previewIndex_' + i ). src = e .target. result ;

var fd = new FormData ();

fd . append ( 'file' , file ); //'file'為傳過去的參數(type String)

console . log ( file );

var xhrs = new XMLHttpRequest ();

xhrs . upload . addEventListener ( "progress" , uploadProgress , false ); //監聽上傳進度

xhrs . addEventListener ( "load" , uploadComplete , false );

xhrs . addEventListener ( "error" , uploadFailed , false );

xhrs . open ( "POST" , 'http://vote.jiugoule.net/index.php?s=app/participate/upload&uid=93&token=b8d3bce08ccd81677f935c2da6e7b4f0&activity_id=2' );

xhrs . send ( fd );

function uploadProgress (event) { //上傳中

if ( index == 4 ) { //添加視頻背景圖

$ ( ".video-bg" ). show ();

}

if (event. lengthComputable ) {

var percentComplete = Math. round (event. loaded * 100 / event. total );

//console.log(document.getElementById("proTxt_" + index),index);

document. getElementById ( "proTxt_" + index ). innerHTML = percentComplete . toString () + '%' ;

document. getElementById ( "proLong_" + index ).style.height = percentComplete . toString () + '%' ;

}

};

function uploadComplete (event) { //上傳完成

if ( index == 4 ) { //視頻(需知道位置)

document. getElementById ( "proTxt_" + index ). innerHTML = "視頻上傳完成,點擊更改" ;

$ ( ".video-select" ). css ({ //防止file選擇被遮擋

'z-index' : 6

});

//return;

var resVideo = eval ( "(" + event.target.responseText + ")" ); //視頻

videoUrl = resVideo .data. url ;

} else {

var resJson = eval ( "(" + event.target.responseText + ")" );

imgArr . push ( resJson .data. url );

document. getElementById ( "proTxt_" + index ). innerHTML = "上傳成功" ;

setTimeout (() => {

document. getElementById ( "proTxt_" + index ).style.display = "none" ;

document. getElementById ( "proLong_" + index ).style.display = "none" ;

}, 500 )

}

};

function uploadFailed (event) { //上傳失敗

};

};

}

};

fr . readAsDataURL ( file );

};

}

 傳到后台的地址以及成功后處理方法因人而異。

//圖片預覽

var uploder = {

fileToUpload: document. getElementsByClassName ( "fileToUpload" ),

thumb: document. getElementsByClassName ( "thumb" )

};

imgArr = []; //傳到后台的圖片

videoUrl = '' ; //傳到后台的視頻

function showPreview ( img , index ) {

var file = img . files [ 0 ]; //當前文件(默認只能單選)

var len = uploder . fileToUpload .length;

var fileSize = 0 ;

if ( file .size > 1024 * 1024 ) {

fileSize = ( Math . round ( file .size * 100 / ( 1024 * 1024 )) / 100 ). toString () + 'MB' ;

console . log ( fileSize );

} else {

fileSize = ( Math . round ( file .size * 100 / 1024 ) / 100 ). toString () + 'KB' ;

console . log ( fileSize );

};

if (window. FileReader ) { //文件預覽

var fr = new FileReader ();

fr . onloadend = function ( e ) {

for ( var i = 1 ; i <= len ; i ++ ) {

if ( i == index ) { //當前圖片索引

document. getElementById ( 'previewIndex_' + i ). src = e .target. result ;

var fd = new FormData ();

fd . append ( 'file' , file ); //'file'為傳過去的參數(type String)

console . log ( file );

var xhrs = new XMLHttpRequest ();

xhrs . upload . addEventListener ( "progress" , uploadProgress , false ); //監聽上傳進度

xhrs . addEventListener ( "load" , uploadComplete , false );

xhrs . addEventListener ( "error" , uploadFailed , false );

xhrs . open ( "POST" , 'http://vote.jiugoule.net/index.php?s=app/participate/upload&uid=93&token=b8d3bce08ccd81677f935c2da6e7b4f0&activity_id=2' );

xhrs . send ( fd );

function uploadProgress ( event ) { //上傳中

if ( index == 4 ) { //添加視頻背景圖

$ ( ".video-bg" ). show ();

}

if (event. lengthComputable ) {

var percentComplete = Math . round (event. loaded * 100 / event. total );

//console.log(document.getElementById("proTxt_" + index),index);

document. getElementById ( "proTxt_" + index ). innerHTML = percentComplete . toString () + '%' ;

document. getElementById ( "proLong_" + index ).style.height = percentComplete . toString () + '%' ;

}

};

function uploadComplete ( event ) { //上傳完成

if ( index == 4 ) { //視頻(需知道位置)

document. getElementById ( "proTxt_" + index ). innerHTML = "視頻上傳完成,點擊更改" ;

$ ( ".video-select" ). css ({ //防止file選擇被遮擋

'z-index' : 6

});

//return;

var resVideo = eval ( "(" + event.target.responseText + ")" ); //視頻

videoUrl = resVideo .data. url ;

} else {

var resJson = eval ( "(" + event.target.responseText + ")" );

imgArr . push ( resJson .data. url );

document. getElementById ( "proTxt_" + index ). innerHTML = "上傳成功" ;

setTimeout (() => {

document. getElementById ( "proTxt_" + index ).style.display = "none" ;

document. getElementById ( "proLong_" + index ).style.display = "none" ;

}, 500 )

}

};

function uploadFailed ( event ) { //上傳失敗

};

};

}

};

fr . readAsDataURL ( file );

};

}