不帶外掛，自己寫js，實現批量上傳檔案及進度顯示

阿新 • • 發佈：2019-01-21

今天接受專案中要完成檔案批量上傳檔案而且還要顯示上傳進度，一開始覺得這個應該不是很麻煩，當我在做的時候遇到了很多問題，很頭疼啊。

不過看了別人寫的程式碼，自己也測試過，發現網上好多都存在一些問題，並不是自己想要的。然後自己查閱各種資料，經過自己總結，最終完成了這個功能。

如果大家有什麼問題可以提出來，一起交流，學習。有什麼不對的地方也指出來，我也虛心學習。自己也是剛寫部落格，您們的贊是我寫部落格的動力，謝謝大家。

條件：我採用struts2,java ,ajax，FormData實現;

1.實現的邏輯一定要清楚，多檔案上傳要在input標籤中新增 multiple屬性

2.點選上傳後觸發的方法

3.迴圈將選擇的檔案新增到FormData物件中

4.將傳送ajax的內容封裝到一個方法中，迴圈ajax，對多個檔案一次一次提交。這裡要注意了，ajax迴圈時要採用遞迴的方式，如果採用for迴圈，就會得到你意想不到的結果，ajax是非同步請求。

5.在ajax中新增xhr，設定上傳監聽事件。

6.java後臺接收，當後臺接收到action時，你會看到getFiles()方法中已經得到了上傳檔案在tomcat服務下的地址。，其它引數均能得到，這裡我就不一一展示了。

7.當ajax成功返回資料時，說明該檔案已經傳到伺服器上了，此時移除上一個檔案並執行後面的檔案傳送ajax

8.監聽事件的寫法，監聽每一個檔案上傳速度情況。

下面我就分享出我做測試用的程式碼，如果大家有什麼不懂的地方可以評論出來，大家一起交流學習進步。

html部分：

<!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檔案部分：這是關鍵，

 1 /**
 2  * 
 3  */
 4 var i=0;
 5 var j=0;
 6 $(function(){
 7     
 8     $("#fileMutiply").change(function eventStart(){
 9         var ss =this.files; //獲取當前選擇的檔案物件
10          for(var m=0;m<ss.length;m++){  //迴圈新增進度條
11                  
12                  efileName = ss[m].name ;
13          if (ss[m].size> 1024 * 1024){
14             sfileSize = (Math.round(ss[m].size /(1024 * 1024))).toString() + 'MB';
15             }
16         else{
17             sfileSize = (Math.round(ss[m].size/1024)).toString() + 'KB';
18             }
19      
20              
21          $("#test").append(
22          "<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>");
23      
24                  }
25          sendAjax();
26           function sendAjax() {  
27                   if(j>=ss.length)   //採用遞迴的方式迴圈傳送ajax請求
28                 {  
29                   $("#fileMutiply").val("");
30                        j=0;
31                     return;  
32                 }
33                var formData = new FormData();
34                formData.append('files', ss[j]);  //將該file物件新增到formData物件中
35                     $.ajax({
36                         url:'fileUpLoad.action',
37                         type:'POST',
38                         cache: false,
39                         data:{},//需要什麼引數，自己配置
40                         data: formData,//檔案以formData形式傳入
41                         processData : false, 
42                        //必須false才會自動加上正確的Content-Type 
43                        contentType : false , 
44                     /*   beforeSend:beforeSend,//傳送請求
45                        complete:complete,//請求完成
46         */            xhr: function(){      //監聽用於上傳顯示進度
47                             var xhr = $.ajaxSettings.xhr();
48                             if(onprogress && xhr.upload) {
49                              xhr.upload.addEventListener("progress" , onprogress, false);
50                              return xhr;
51                             }
52                            } ,
53                         success:function(data){
54                      
55                         
56                             $(".filelist").find("#"+j+"file").remove();//移除進度條樣式
57                              j++; //遞迴條件
58                             sendAjax();
59                             
60                    //     }
61                             
62                         },
63                         error:function(xhr){
64                           alert("上傳出錯");
65                         }                              
66                     });
67                 
68               
69                 } 
70         
71     })
72     
73     
74        function onprogress(evt){
75          
76           var loaded = evt.loaded;     //已經上傳大小情況 
77           var tot = evt.total;      //附件總大小 
78           var per = Math.floor(100*loaded/tot);  //已經上傳的百分比 
79          $(".filelist").find("#"+j+"pps").text(per +"%");
80          $(".filelist").find("#"+j+"barj").width(per+"%");
81          };
82     
83     
84 })

不帶外掛，自己寫js，實現批量上傳檔案及進度顯示

今天接受專案中要完成檔案批量上傳檔案而且還要顯示上傳進度，一開始覺得這個應該不是很麻煩，當我在做的時候遇到了很多問題，很頭疼啊。不過看了別人寫的程式碼，自己也測試過，發現網上好多都存在一些問題，並不是自己想要的。然後自己查閱各種資料，經過自己總結，最終完成了這個功能。

不帶插件，自己寫js，實現批量上傳文件及進度顯示

批量上傳發的 xhr string () .cn tom 需要 pen 今天接受項目中要完成文件批量上傳文件而且還要顯示上傳進度，一開始覺得這個應該不是很麻煩，當我在做的時候遇到了很多問題，很頭疼啊。不過看了別人寫的代碼，自己也測試過，發現網上好多都存在一些問題，並不是

生成不重複隨機數，自己寫的，嘿嘿

package 基礎演算法; import java.util.Arrays; public class radomNums { public static void main(String[] args){ int[] array=new int[8]; i

form表單提交批量上傳檔案，不重新整理不跳轉頁面

jsp： <form action="inImg.do" method="post" enctype="multipart/form-data" target="nm_iframe"> <table> <tr>

使用TCP協議，分別編寫服務端和客戶端，要求客戶端向服務端上傳檔案。(使用字元流完成)

package Test; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileReader; import java.io.IOException; import java.io

批量上傳檔案時，關於post請求報錯NET:ERR_CONNECTION_RESET

前言新手做前端大專案，遇到坑真是接踵而來。這次遇到的是使用formData傳檔案的時候，如果上傳檔案數太多，總是報NET:ERR_CONNECTION_RESET的錯，百度好久也不知道什麼原因，後來自己慢慢摸索，可能原因有二。一、檢視一下tomcat配置檔案serve

Extjs上傳附件實戰開發，實現批量上傳及線上預覽功能（二）

SWFUpload的使用： SWFUpload採用czpae86的UploadPanel二次開發，在此鳴謝。 SWFUpload下載最新版本swfupload.swf.v2.5.0.beta3.2.zip，你會發現資料夾裡只有swfuploa

Xshell 實現Windows上傳檔案到Linux，上傳失敗的解決方法

今天在本地上傳兩個zip包到Linux伺服器，出現上傳中，無故取消的情況，還有上傳過程中出現亂碼的情況，多次測試都這樣，看異常的情況應該是伺服器識別到了檔案中特殊的欄位，比如^C，然後 rz 加上了 -be 兩個引數，就能正常上傳到伺服器了常用引數　　-b 以二進位

【全網首創】修改 Ext.ux.UploadDialog.Dialog 原始碼支援多選新增檔案，批量上傳檔案

　　公司老框架的一個頁面需要用到檔案上傳，本以為修改一個配置引數即可解決，百度一番發現都在說這個第三方外掛不支援檔案多選功能，還有各種各樣缺點，暫且不討論這些吧。先完成領導安排下來的任務。　　任務一：支援多選新增檔案　　任務二：支援批量新增檔案　　我們先來說第二個任務吧，第二個任務相比較容易些，經過半天

SpringMVC_20_使用HttpMessageConverter T 實現了上傳檔案（不推薦）和下載檔案操作

使用HttpMessageConverter< T>將請求資訊轉化並繫結到處理方法的入參中或將響應結果轉化為對應型別的響應資訊，Spring提供了兩種途徑：使用@RequestBody/@ResponseBody對處理方法進行標註使用Ht

java 單個上傳檔案, 批量上傳檔案,單個下載,批量打成zip壓縮包下載檔案(如果不能接受httpsevletrequest請求的檔案可以使用MultipartFile[] files)

package net.wkang.intelligent_audit.hospitalization.utils; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; impor

新浪釋出帶圖片的微博[multipart/form-data格式上傳檔案]

在使用新浪微博的API更新一條帶圖片的微博時，需要使用multipart/form-data風格的POST 需要在request頭設定Content-type Content-type = multipart/form-data; boundary=xxxx 其中 bou

jQuery實現jQuery-form.js實現非同步上傳檔案

做為一個前端開發，你肯定遇到過這樣的需求：非同步上傳檔案，還要相容IE 8。[納尼，沒遇到過，那你們產品和ＵＩ對你也忒好了吧。遇到這種需求，如果專案不是很趕，可以自己用iframe來做，如果專案比較趕的話，就可以使用jquery-form.js外掛來實現，方便快捷。

原生JS實現ajax上傳檔案並顯示進度條

html程式碼 <progress id="progressbar" value="0" max="100" style="width:300px;"></progress>

angular4.0引入安裝第三方外掛以及自己寫的css，js

安裝第三方外掛（jquery，bootstrap等）由於修改了angular-cli.json所以修改完成後一定要重啟專案 jquery安裝進入專案目錄輸入（可以使用淘寶映象） npm install –save jquery npm in

Cisco 2821路由器密碼恢復(自己查不到，才寫文章，讓其他達達不需要像我一樣花費那麼多時間）

桌子底下有一臺Cisco 2821路由器要配置，連上控制線，開啟管理介面，試了N次使用者名稱和密碼，最後放棄了，嘗試恢復密碼。百度了一下，有說開機60秒內，CTRL + Break 進入rommon模式的，也有說只有Break鍵的，路由器重啟了十幾次都不行。只好再找度娘，無意中看到了要拔下CF

並歸排序（看別人的看不懂，自己寫了一個），排序思想是一樣的

public int[] intArray = {8,5,10,55,88,22,14,36,82,54,10,74,22}; @RequestMapping(value="hello") public int[] getHello(int[] intArray1) {

Python練習題4（列表去重）：[5,3,4,'ok',4,3,'abc',8,52,'ok']去除列表中重複內容方法一：使用set 方法二：不使用set，自己寫方法

方法一：利用集合去重 1 list1 = [5,3,4,'ok',4,3,'abc',8,52,'ok'] 2 list1=list(set(list1)) 3 print(list1) 方法二：此方法略微冗餘，先判斷元素是否重複，再將重複元素提取並儲存到新列表中，再for 新建的列表元素，刪除

2018年第九屆藍橋杯省賽C/C++ A組（蒻雞自己寫的，看不上勿噴，自己的一點想法）

第一題標題：分數 1/1 + 1/2 + 1/4 + 1/8 + 1/16 + …. 每項是前一項的一半，如果一共有20項, 求這個和是多少，結果用分數表示出來。類似： 3/2 當然，這只是加了前2項而已。分子分母要求互質。注意：需要

使用 js，自己寫一個簡單的滾動條

back http 之前 fun 完全 light get ini 計算當我們給元素加上 overflow: auto; 的時候，就會出現滾動條，然而瀏覽的不同，滾動條的樣式大不一樣，有些甚至非常醜。於是就想著自己寫一個滾動條，大概需要弄清楚一下這幾個點： 1、滾

不帶外掛 ，自己寫js，實現批量上傳檔案及進度顯示

相關推薦

不帶外掛，自己寫js，實現批量上傳檔案及進度顯示