Without plug-ins, to write js, and implement bulk upload progress display

Today accepted a project to complete a bulk upload file upload progress but also to show, I began to feel this should not be too much trouble, when I was doing a lot of problems encountered, headache ah.

But read the code written by someone else, and he tested and found many online there are some problems, not what you want. Then all kinds of access to their own information, through their own conclusion, finally completed this function.

If you have any questions can be raised, with the exchange and learning. There is something wrong also point out, I also learn from. He is also just write a blog, you have the praise is my motivation to write blog, thank you.

Conditions: I am using struts2, java, ajax, FormData achieve;

1. The realization of logic must be clear, multi-file upload To add multiple properties in the input tab

2. Click the trigger method after uploading

3. Cycle the selected file to the object FormData

4. ajax transmitting contents to a packaging process, ajax cycle, a plurality of documents submitted once. Here we must pay attention, to be used recursively when ajax cycle, if a for loop, you will get unexpected results, ajax asynchronous request.

5. Add xhr in ajax, set upload monitor events.

6.java backstage reception, when receiving the backstage action, you'll see getFiles () method has been uploaded file location in tomcat services. Other parameters can get, I will not show up here.

7. When ajax return data successfully, indicating that the file has been reached on the server, then the removal of a document file and transmitted back execution ajax

8. wording monitor events, monitor every file upload speeds.

Here I will share that I did test the code, if you have any do not know where it can comment, share with everyone learning progress.

html part:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./css/NewFile.css">

<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./js/fileMuti.js"></script>

</head>
<body>
<div id="test">
<input type="file" id="fileMutiply" name="files" multiple="multiple" >
</div>
</body>
</html>

js文件部分：这是关键，

/**
 * 
 */
var i=0;
var j=0;
$(function(){
    
    $("#fileMutiply").change(function eventStart(){
        var ss =this.files; //获取当前选择的文件对象
         for(var m=0;m<ss.length;m++){  //循环添加进度条
                 
                 efileName = ss[m].name ;
         if (ss[m].size> 1024 * 1024){
            sfileSize = (Math.round(ss[m].size /(1024 * 1024))).toString() + 'MB';
            }
        else{
            sfileSize = (Math.round(ss[m].size/1024)).toString() + 'KB';
            }
     
             
         $("#test").append(
         "<li  id="+m+"file><div class='progress'><div id="+m+"barj class='progressbar'></div></div><span class='filename'>"+efileName+"</span><span id="+m+"pps class='progressnum'>"+(sfileSize)+"</span></li>");
     
                 }
         sendAjax();
          function sendAjax() {  
                  if(j>=ss.length)   //采用递归的方式循环发送ajax请求
                {  
                  $("#fileMutiply").val("");
                       j=0;
                    return;  
                }
               var formData = new FormData();
               formData.append('files', ss[j]);  //将该file对象添加到formData对象中
                    $.ajax({
                        url:'fileUpLoad.action',
                        type:'POST',
                        cache: false,
                        data:{},//需要什么参数，自己配置
                        data: formData,//文件以formData形式传入
                        processData : false, 
                       //必须false才会自动加上正确的Content-Type 
                       contentType : false , 
                    /*   beforeSend:beforeSend,//发送请求
                       complete:complete,//请求完成
        */            xhr: function(){      //监听用于上传显示进度
                            var xhr = $.ajaxSettings.xhr();
                            if(onprogress && xhr.upload) {
                             xhr.upload.addEventListener("progress" , onprogress, false);
                             return xhr;
                            }
                           } ,
                        success:function(data){
                     
                        
                            $(".filelist").find("#"+j+"file").remove();//移除进度条样式
                             j++; //递归条件
                            sendAjax();
                            
                   //     }
                            
                        },
                        error:function(xhr){
                          alert("上传出错");
                        }                              
                    });
                
              
                } 
        
    })
    
    
       function onprogress(evt){
         
          var loaded = evt.loaded;     //已经上传大小情况 
          var tot = evt.total;      //附件总大小 
          var per = Math.floor(100*loaded/tot);  //已经上传的百分比 
         $(".filelist").find("#"+j+"pps").text(per +"%");
         $(".filelist").find("#"+j+"barj").width(per+"%");
         };
    
    
})

Without plug-ins, to write js, and implement bulk upload progress display

Guess you like