使用ajaxFileupload實現多檔案批量上傳

轉自:http://blog.csdn.net/zhanglu201112/article/details/17039137

開啟google 搜尋 ‘ajaxFileupload’ ‘多檔案上傳’ 可以搜到許許多多類似的，那我為什麼還要寫一下呢？

一個是對之前大神的貢獻表示感謝；二個是自己知識的總結；三個是自己在原有的基礎上改動了下，在此記錄，可能幫助其他朋友。

用過這個外掛的都知道這個外掛的基本用法，我就不廢話，直接上程式碼。

我需要實現多個檔案上傳，之前的做法是定義多個不同id的input，然後把ajaxfileuplod方法放在for迴圈裡，這個方法是在網上看到的，我覺得不怎麼好，後面在網上找到的，就高階點了，直接改原始碼（因為作者好久沒有跟新了，也確實滿足不了要求了）。接下來看看我是怎麼改的。

引用網上的做法：

1，看沒有修改前的程式碼

Js程式碼

var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);

很容易看出，這個就是把id為什麼的input加到from裡去，那麼要實現多個檔案上傳，就改成下面的樣子：

Js程式碼

if(typeof(fileElementId) == 'string'){
fileElementId = [fileElementId];
}
for(var i in fileElementId){
var oldElement = jQuery('#' + fileElementId[i]);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
}

這樣改之後，初始化的程式碼就要這麼寫：

Js程式碼

$.ajaxFileUpload({
url:'/ajax.php',
fileElementId:['id1','id2']//原先是fileElementId:’id’ 只能上傳一個
});

到這裡，確實可以上傳多個檔案，但是對於我來說新問題又來，多個id，我的介面的檔案不是固定的，是動態載入的，那麼id要動態生成，我覺得太麻煩，為什麼不取name呢？然後把以上程式碼改為如下：

Js程式碼

if(typeof(fileElementId) == 'string'){
fileElementId = [fileElementId];
}
for(var i in fileElementId){
//按name取值
var oldElement = jQuery("input[name="+fileElementId[i]+"]");
oldElement.each(function() {
var newElement = jQuery($(this)).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
});
}

這樣改了那麼就可以實現多組多個檔案上傳，接下來看我是怎麼應用的。

html：

Html程式碼

<div>
<img id="loading" src="scripts/ajaxFileUploader/loading.gif" style="display:none;">
<table cellpadding="0" cellspacing="0" class="tableForm" id="calculation_model">
<thead>
<tr>
<th>多組多個檔案</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一組</td>
<td>第二組</td>
</tr>
<tr>
<td><input type="file" name="gridDoc" class="input"></td>
<td><input type="file" name="caseDoc" class="input"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button class="button" id="up1">Upload</button></td>
<td><button class="button" id="addInput" >新增一組</button></td>
</tr>
</tfoot>
</table>
</div>

js:

Js程式碼

/**
* Created with IntelliJ IDEA.
* User: Administrator
* Date: 13-7-3
* Time: 上午9:20
相關推薦

使用ajaxFileupload實現多檔案批量上傳

轉自:http://blog.csdn.net/zhanglu201112/article/details/17039137 開啟google 搜尋 ‘ajaxFileupload’ ‘多檔案上傳’ 可以搜到許許多多類似的，那我為什麼還要寫一下呢？一

ajaxFileUpload 實現多文件上傳(源碼)

quest result 問題： check type make with tel orm 按照原ajaxFileUpload.js是不能多文件上傳的。需要對源碼進行修改：主要修改了fileElementId部分具體參考 https://blog.csdn.net/itm

HTML5實現多檔案的上傳示例程式碼

程式碼如下:import java.io.File; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.uti

SpringMVC + AJAX 實現多檔案非同步上傳

轉自：https://www.jianshu.com/p/f3987f0f471f 今天，我就這個問題來寫一篇如何用 SpringMVC + AJAX 實現的多檔案非同步上傳功能。基本的程式碼還是沿用上篇文章中所用到的專案，需要的朋友可以點選前面的連結檢視。在這裡只貼出關鍵程式碼。首先

多檔案批量上傳

在網站後臺開發中並經常需要和上傳打交道，而單一的上傳方式已經不適合，大量相似型別的檔案批量上傳，那如何做到呢？（1）當然第一步首先得封裝下檔案上傳的基本函式uploadFiles()方法（2）第二步，那就編輯簡單的上傳的表單吧？（3）第三步編寫php doAction3.ph

Jfinal框架下結合ajaxFileupload實現多檔案上傳

距離寫程式碼時間有點長了，沒有及時總結，現在忘得差不多了。不過大概思路還在，也是有點參考價值的！思路：由於jfinal框架自身的問題，在實現多檔案上傳時很難獲取所有檔案的名字，只能獲取到一個input標籤裡面的名字而已，重寫框架是最佳的方法，但是對於初學者而言十分艱

asp.net+JQuery實現檔案批量上傳!

做系統的時候難免會遇到需要批量上傳這樣的需求，之前一直沒有做過，今天經理給了這個需求並簡單講了一下思路，花了點時間把它給做出來了，細想起來還是比較簡單的。思路：用JQuery來實現動態的新增或者刪除多個上傳控制元件（如<input type="file" name=

javascript結合nodejs實現多文件上傳

ima 實現依賴看到了包括小夥伴邊緣 multipart images 前端文件上傳功能比較依賴後端，所以第一步用nodejs實現一個供文件上傳的功能接口。因為本人對nodejs也是一知半解，所以剛開始的想法是像原始的ajax交互那樣，獲取上傳文件的內容，然後

C#實現FTP檔案的上傳、下載功能、新建目錄以及檔案的刪除

轉載至：https://www.cnblogs.com/zhenzaizai/p/7434669.html using System; using System.Collections.Generic;

用原生JS實現多張圖片上傳及預覽功能（相容IE8）

最近需要做一個圖片上傳預覽的功能（相容IE8-11、chrome、firefox等瀏覽器），網上現有的檔案上傳元件（如webuploader）總是會遇到一些相容性問題。於是我參考了一些博文（連結找不到了⊙o⊙…），自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能：

北斗PDF轉換器如何實現多檔案批量合併在一起。

有時候我們需要對一些PDF文件進行編輯修改，但是PDF格式文件不能像Word文件一樣直接開啟就能編輯，並且在頁面內容的複製貼上也沒有那麼方便。比如說我們想要將若干個PDF合併該怎麼辦呢？同樣在我們生活中無論網上下載或者是其他什麼情況都可能把很多個單獨的PDF檔案合在一起進行整體。為了閱讀和列

WebApi實現單個檔案的上傳下載

上傳和下載是很常用的功能了，只有當用到的時候才發現不會寫...，經過一番百度、篩選、整理修改後，實現了功能，下面簡單的記錄下實現方法。一、上傳功能 1.前端程式碼上傳檔案 <input type="file" id="file" /> <input type="button"

webupload多檔案的上傳

前端頁面： <li class="mui-table-view-cell"> <p>營業執照</p> <div class="liBox"> <div class="img" style="width: 1

網頁內實現大檔案分片上傳、斷點續傳

最近做公司的專案，需要在後臺控制系統中新增一個功能-------向伺服器傳送程式更新包；這些程式更新包大小不固定，但基本都在1G到4G之間，剛開始還真是難倒我了，因為之前的專案中沒有上傳過這麼大的檔案，還要斷點續傳，後來經過查資料，寫DEMO，這個問題終於解決了；解決辦法：使用XMLHt

react-native實現多張圖片上傳

最近在搞這個圖片上傳功能，，剛開始的時候iOS用的是 react-native-image-crop-picker這個外掛，，iOS那邊完美執行沒有毛病，，，但是到android這邊之後就開始報各種資源

thinkphp5 結合plupload 實現多圖片的上傳

PHP頁面 <?php namespace app\index\controller; use think\Controller; use think\Db; class Upload extends Controller{ /* t

Java實現FTP檔案的上傳和下載

一、前言：最近剛好需要實現這個功能：實現ftp的上傳和下載。在網上找了下資料，總結了下。直接上程式碼：二、程式碼示例：首先使用到的maven依賴： <dependency> <groupId>commons-net</gro

java實現ipfs檔案的上傳和下載

1.引入所需要的依賴 <repositories> <repository> <id>jitpack.io</id>

SSM中使用Kindeditor外掛實現圖片的批量上傳與回顯

圖片上傳的方式： 1.上傳到資料庫中的Blob型別，從資料庫中取出來並顯示。詳細見下面連結 http://blog.sina.com.cn/s/blog_5b0745e80102we31.html 2.上傳到伺服器的固定目錄下，在資料庫中僅儲存圖片的地址。詳細見下文效果

【前端】利用ajax實現偽檔案非同步上傳下載

利用ajax可以實現很酷的效果，在不重新整理頁面的情況下提交表單、修改資料狀態等等，可是如果表單裡還有input:file可就慘了，ajax不支援檔案的處理啊！ ajax是使用了瀏覽器內部的XmlHttpRequest物件來傳輸XML資料的。既然是Xml的資料傳輸，那麼傳輸

使用ajaxFileupload實現多檔案批量上傳

相關推薦