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/*" οnchange="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 );

};

}

转载于:https://www.cnblogs.com/lpggo/p/7719824.html