多文件文件上傳組件
『壹』 文件上傳工具有哪些
有
HandyFTP
CuteFTP Pro文件上傳工具
縱橫HTTP文件上傳組件
批量文件上傳工具
BrsBox上傳工具
Google Docs文件上傳工具
等等，網路網頁搜有很多，根據需要選擇
『貳』 [FE] 用 FormData 上傳多個文件到 MultipartFile[] 介面
最近有一個場景，在提交表單的時候，需要實現添加附件的功能，
表單內容要先提交到服務端，創建一個 issue，然後再將附件添加到這個 issue 中。
所以，附件在用戶添加的時候，是 沒有立即上傳 的，
用戶可以隨意在瀏覽器端添加和刪除，issue 創建後再一起上傳。
前端採用的組件庫是 antd ，用到了 upload 組件。
服務端介面是自定義實現的，也許並不支持 antd upload 上傳組件的規范。
服務端接受數據時，使用了 MultipartFile ，這是 Spring 框架中常用的 寫法 。
我們先看看 html input[type=file] 組件默認行為，
點擊 「選擇文件」，瀏覽器會彈出一個窗口，
選中一個文件，點 「打開」，就會觸發 onchange 事件，
在 onchange 事件中，可以通過 e.target.files[0] 拿到剛才上傳的那個 File 對象 。
再來看一下 upload 組件的默認行為，
點擊 「添加」，瀏覽器也會彈出那個選擇文件的窗口，
選中一個文件，點 「打開」，發現上傳失敗了。
打開控制台，看到 upload 組件向 / 這個地址發送了一個 POST 請求，
數據格式如下，
我們可以向 upload 組件傳入 action 參數，修改 POST 請求地址，
但是，選中文件後立即上傳 不符合 我們的場景，我們需要提交表單之後，將多個文件統一上傳。
所以我們得自定義 upload 組件的行為。
upload 組件的有一個 customRequest 屬性（ #api ），
它可以配置自定義的上傳行為。
我們的思路是，先將選中後自動上傳的行為取消掉，然後再在提交表單後統一上傳。
取消自動上傳 的實現片段如下，
我們只需要在 customRequest 回調中，調用它的 onSuccess 參數即可。
刪除也是可以用的，
現在我們添加兩個附件，
接著來看前端怎樣將這些附件，統一上傳給服務端，具體實現如下，
可以看到請求成功了（項目中的 url 跟本例稍有不同，下圖只為了示意），
還有幾個需要注意的點：
上文 httpClient.post 實際調用了 XMLHttpRequest 發送請求，可能會遇到 跨域 的問題。
所以在調試上傳介面的時候，需要檢查一下服務端的配置，是否支持跨域請求。
CORS 相關的內容大致如下：
在預檢請求階段，服務端對 OPTIONS 請求的響應頭中會包含 Access-Control-Allow-Origin ，
表明服務端接受該域 http://foo.example 的跨域請求。
註：
這里需要後端實現 OPTIONS 方法，後端框架一般會通過配置方式統一處理（返回 200 或 204，不能是 4xx）。
如果未配置統一處理方式，框架可能會直接返回 404 導致預檢請求失敗，CORS 請求也會失敗。
使用 XMLHttpRequest 發送請求時，也可以攜帶 cookie 信息，
同時 預檢請求中服務端響應頭，也要包含 Access-Control-Allow-Credentials ，否則就不會發送 cookie
對於附帶 cookie 的請求，伺服器不能設置 Access-Control-Allow-Origin 的值為 「 * 」，否則請求將會失敗。
而將 Access-Control-Allow-Origin 的值設置為具體的地址 http://foo.example ，請求才能成功。
我們上傳功能用到了攜帶 cookie 的跨域請求，
可以看到服務端響應頭中確實包含了， Access-Control-Allow-Credentials 和 Access-Control-Allow-Origin 兩個欄位。
Spring: Uploading Files
Spring: org.springframework.web.multipart #MultipartFile
ant-design v4.11.1
Ant Design - Upload #API
MDN: CORS
『叄』 Easyui的easyui-filebox有人知道是否支持 多文件上傳嗎
easyui-filebox 只是一個UI的插件（其實還是INPUT標簽），它不是上傳組件，所有就不存在是否支持多文件上大旅傳，你要想一次上傳多個文件，可以設置多個easyui-filebox。
拓展
EasyUI+SpringMVC 單個/多個文件上傳
基本步驟：
按或喊照數據流向來闡述
>>> 頁面提供文件上傳控制項.
>>> contorller端接收頁面傳入的文件流，在這個步驟可以寫入資料庫或者滾團凳放到指定目錄.
>>> 將上傳的返回結果寫回頁面.
『肆』 如何使用AspUpload組件上傳文件
你好，試試以下的方法：一、摘要Asp組件有內置的、伺服器安裝時附帶的，更多的是第三方提供的，今天來學習文件上傳的其中一個組件aspupload組件使用方法。
二、aspupload組件的下載、安裝或注冊 1、asp組件的下載、安裝
（1）可以從網上下載。
（2）直接雙擊後進行安裝。
AspUpload組件下載2、asp上傳組件的功能
a.限制上載文件的大小
b.設置用戶的許可權
c.修改文件屬性
d.同時上載多個文件
e.能夠將文件保存到資料庫中
f.支持文件刪除，自動生成與伺服器上文件不同名的文件
g.擁有管理許可權的用戶甚至可以使用該控制項進行遠程注冊
三、aspupload組件的簡單應用
1、實例一（1.asp）：通過代碼實現三個文件的上傳功能。
如下圖所示：
（1）靜態頁面：1個表單，三個文件域，一個按鈕，其中表單form的動作如下。 （2）其中客戶端文件要注意幾點：
* 文件上載提交表單(Form)的enctype必須指定為「multipart/form-data」
* 語句表示上載文件域，用戶可以在該域中輸入或選定文件。
* 傳遞一個參數act（名稱可自己取），其值可以自己隨便定，目的是觸發上傳事件。
（3）動態代碼如下：
2、實例二（2.asp）：修改程序1.asp，要求在上傳文件後顯示上傳文件的文件名及大小。
增加如下代碼： response.write("文件1是：
")response.write(upload.files(1).path)
response.write("文件2是：
")response.write(upload.files(2).path)
response.write("文件3是：
")
response.write(upload.files(3).path)
說明：
upload.files方法用來獲取文件的相關屬性，path是文件的路徑，size是文件的大小。
3、實例三（3.asp）：修改程序2.asp，要求上傳的三個文件大小不能超過5K，如果上傳的文件已經存在則要求不覆蓋文件。
在上傳之前增加如下代碼：
upload.setmaxsize 5120,false
upload.overwritefiles=fals說明：
（1）upload.setmaxsize 5120,false其功能為設置文件最大為5120位元組，false參數說明當文件超過5120位元組時則刪除超過部分，true參數說明當文件超過5120位元組時則出錯。
（2）upload.overwritefiles=false，其功能表示文件不進行覆蓋，如果上傳同樣文件名的文件，上傳後文件名自動會在後面添加一個數字。
四、自學第二個上傳文件的組件
1、Lyfupload組件的下載
2、學習此組件的安裝或注冊
3、通過課本例子進行文件的上傳
五、問題
1、傳到學校里伺服器172.18.0.7運行時出現以下錯誤，Server.CreateObject 失敗
分析原因：學校伺服器不支持aspupload上傳組件
2、如果伺服器不支持aspupload等上傳組件，請大家使用無組件上傳功能（編寫代碼），見書本上P322，此類代碼比較復雜，同學們能夠拿來使用，無須自己編寫。
3、大家在網上申請個人空間時要看清伺服器支持哪些組件，這樣有利於編寫代碼。
『伍』 如何通過js完成多個文件的上傳
HTML5 file組件的新屬性
accept : 如果在file組件中增加這個屬性就可以直接控制上傳的文件類型了，實在是很方便。
multiple：是否允許選擇多個文件
HTML5 頁面代碼修改後
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上傳圖片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>
accept 的值可以參閱：IANA MIME 類型（標准 MIME 類型的完整列表），如果使用的是DW開發的話，軟體本身就有提示。
如果選擇了多個文件，可以用JS做循環列印，看看文件的名稱，類型和大小,看演示代碼
function printFileInfo(){
var picFile = document.getElementById("pic");
var files = picFile.files;
for(var i=0; i<files.length; i++){
var file = files[i];
var div = document.createElement("div")
div.innerHTML = "第("+ (i+1) +") 個文件的名字："+ file.name +
" , 文件類型："+ file.type +" , 文件大小:"+ file.size
document.body.appendChild( div)
}
}
既然可以循環多文件的話，就可以嘗試多文件上傳了。
1、首先創建 XMLHttpRequest 對象
//這是全局變數。因為是示例，所以就沒有判斷瀏覽器類型，低版本IE這么寫的話會出問題的
var xhr = new XMLHttpRequest()
2、上篇介紹了進度事件(Progress) ， 這次實現 progress 和 error 2個事件
error：在請求發生錯誤時觸發。
對應上傳時發生錯誤導致的上傳失敗：uploadFailed()
//上傳失敗
function uploadFailed(evt) {
alert("上傳失敗");
}
progress：在接收相應期間持續不斷觸發。
對應上傳進度方法：onprogress()
/**
* 偵查附件上傳情況 ,這個方法大概0.05-0.1秒執行一次
*/
function onprogress(evt){
var loaded = evt.loaded; //已經上傳大小情況
var tot = evt.total; //附件總大小
var per = Math.floor(100*loaded/tot); //已經上傳的百分比
$("#son").html( per +"%" );
$("#son").css("width" , per +"%");
}
最後就是上傳方法了，注意上面的html代碼中上傳用的方法也需要改成這個uploadFile()方法才能正常使用。
//上傳文件
function uploadFile() {
//將上傳的多個文件放入formData中
var picFileList = $("#pic").get(0).files;
var formData = new FormData();
for(var i=0; i< picFileList.length; i++){
formData.append("file" , picFileList[i] );
}
//監聽事件
xhr.upload.addEventListener("progress", onprogress, false);
xhr.addEventListener("error", uploadFailed, false);//發送文件和表單自定義參數
xhr.open("POST", "upload");
//記得加入上傳數據formData
xhr.send(formData);
}
『陸』 webuploader分片上傳的實現代碼（前後端分離）
本文介紹了webuploader分片上傳的實現代碼（前後端分離），分享給大家，具體如下：
WebUploader是由Bai
WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器裡面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS
6+,
android
4+。兩套運行時，同樣的調用方式，可供用戶任意選用。採用大文件分片並發上傳，極大的提高了文件上傳效率。(這個是從官網上直接的解釋)
功能描述
1、webuploader是網路研發的上傳組件，文檔不是特別規整，但是也夠用了。
2、前端使用官網的上傳圖片demo，在此基礎上代碼略微調整做分片。既可以上傳圖片也可以上傳文件。文件超過分片大小才啟用分片。
3、分片上傳已做md5校驗，達到秒傳的效果。分片以後需要合並，可以先分片後合並，也可以邊分片邊合並，本示例採用的是邊分片邊合並的方案。
4、後端用springboot做框架搭建。springMVC做rest服務，開啟跨域訪問。
5、容器用springboot內置的tomcat插件，運行Application的main方法即可啟動服務；
顯示效果
關鍵代碼前端
WebUploader.Uploader.register({
'name':
'webUploaderHookCommand',
'before-send-file':
'beforeSendFile',
"before-send":
"beforeSend"
},
{
beforeSendFile:
function(file)
{
var
task
=
new
WebUploader.Deferred();
fileName
=
file.name;
fileSize
=
file.size;
(new
WebUploader.Uploader()).md5File(file,
0,
10
*
1024
*
1024).progress(function(percentage)
{}).then(function(val)
{
fileMd5
=
val;
var
url
=
checkUrl;
var
data
=
{
type:
0,
fileName:
fileName,
fileMd5:
fileMd5,
fileSize:
fileSize
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超時的話，只能認為該分片未上傳過
dataType:
"json",
error:
function(XMLHttpRequest,
textStatus,
errorThrown)
{
file.statusText
=
'server_error';
task.reject();
}
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0)
{
if(data.obj
==
1)
{
file.statusText
=
'file_existed';
task.reject();
}
else
{
task.resolve();
}
}
else
{
task.reject();
}
});
});
return
task.promise();
},
beforeSend:
function(block)
{
var
task
=
new
WebUploader.Deferred();
var
url
=
checkUrl;
var
data
=
{
type:
1,
fileName:
fileName,
fileMd5:
fileMd5,
chunk:
block.chunk,
fileSize:
block.end
-
block.start
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超時的話，只能認為該分片未上傳過
dataType:
"json"
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0
&&
data.obj
==
1)
{
task.reject();
//
分片存在，則跳過上傳
}
else
{
task.resolve();
}
});
this.owner.options.formData.fileMd5
=
fileMd5;
this.owner.options.formData.chunkSize
=
chunkSize;
return
task.promise();
}
});
//
實例化
uploader
=
WebUploader.create({
pick:
{
id:
'#filePicker',
label:
'點擊選擇文件'
},
formData:
{
uid:
123
},
dnd:
'#dndArea',
//指定文件拖拽的區域
paste:
'#uploader',
//指定監聽paste事件的容器，如果不指定，不啟用此功能。此功能為通過粘貼來添加截屏的圖片。建議設置為document.body.
swf:
'../plugins/webuploader/Uploader.swf',
chunked:
true,
chunkSize:
chunkSize,
chunkRetry:
false,
threads:
1,
server:
uploadUrl,
//
runtimeOrder:
'flash',
//
accept:
{
//
title:
'Images',
//
extensions:
'gif,jpg,jpeg,bmp,png',
//
mimeTypes:
'image/*'
//
},
//
禁掉全局的拖拽功能。這樣不會出現圖片拖進頁面的時候，把圖片打開。
disableGlobalDnd:
true,
fileNumLimit:
300
//限制多文件上傳的個數
//fileSizeLimit:
200
*
1024
*
1024,
//
限制所有文件的大小
200
M
//fileSingleSizeLimit:
50
*
1024
*
1024
//
限制單個文件的大小
50
M
});
後端
import
java.io.File;
import
java.io.IOException;
import
org.slf4j.Logger;
import
org.slf4j.LoggerFactory;
import
org.springframework.beans.factory.annotation.Value;
import
org.springframework.stereotype.Service;
import
org.springframework.web.multipart.MultipartFile;
import
com.bear.upload.util.FileUtil;
import
com.bear.upload.util.RETURN;
import
com.bear.upload.vo.CheckMd5FileVO;
import
com.bear.upload.vo.UploadVO;
@Service
public
class
ChunkUploadService
{
private
static
Logger
LOG
=
LoggerFactory.getLogger(ChunkUploadService.class);
@Value("${file.upload.path}")
private
String
UPLOAD_PATH;
private
static
final
String
Delimiter
=
"-";
/**
*
上傳之前校驗(整個文件、分片)
*
*
@param
md5FileVO
*
@return
*/
public
Object
check(CheckMd5FileVO
md5FileVO)
{
Integer
type
=
md5FileVO.getType();
Long
chunk
=
md5FileVO.getChunk();
String
fileName
=
md5FileVO.getFileName();
Long
fileSize
=
md5FileVO.getFileSize();
if
(type
==
0)
{//
未分片校驗
String
destfilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destfilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("文件已存在，跳過",
1);
}
else
{
return
RETURN.success("文件不存在",
0);
}
}
else
{//
分片校驗
String
fileMd5
=
md5FileVO.getFileMd5();
String
destFileDir
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
String
destFileName
=
chunk
+
Delimiter
+
fileName;
String
destFilePath
=
destFileDir
+
File.separator
+
destFileName;
File
destFile
=
new
File(destFilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("分片已存在，跳過",
1);
}
else
{
return
RETURN.success("分片不存在",
0);
}
}
}
/**
*
文件上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
upload(MultipartFile
file,
UploadVO
uploadVO)
{
Long
chunk
=
uploadVO.getChunk();
if
(chunk
==
null)
{//
沒有分片
return
UnChunkUpload(file,
uploadVO);
}
else
{//
分片
return
ChunkUpload(file,
uploadVO);
}
}
/**
*
分片上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
ChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
String
fileMd5
=
uploadVO.getFileMd5();
Long
chunk
=
uploadVO.getChunk();//
當前片
Long
chunks
=
uploadVO.getChunks();//
總共多少片
//
分片目錄創建
String
chunkDirPath
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
File
chunkDir
=
new
File(chunkDirPath);
if
(!chunkDir.exists())
{
chunkDir.mkdirs();
}
//
分片文件上傳
String
chunkFileName
=
chunk
+
Delimiter
+
fileName;
String
chunkFilePath
=
chunkDir
+
File.separator
+
chunkFileName;
File
chunkFile
=
new
File(chunkFilePath);
try
{
file.transferTo(chunkFile);
}
catch
(Exception
e)
{
LOG.error("分片上傳出錯",
e);
return
RETURN.fail("分片上傳出錯",
1);
}
//
合並分片
Long
chunkSize
=
uploadVO.getChunkSize();
long
seek
=
chunkSize
*
chunk;
String
destFilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destFilePath);
if
(chunkFile.length()
>
0)
{
try
{
FileUtil.randomAccessFile(chunkFile,
destFile,
seek);
}
catch
(IOException
e)
{
LOG.error("分片{}合並失敗：{}",
chunkFile.getName(),
e.getMessage());
return
RETURN.fail("分片合並失敗",
1);
}
}
if
(chunk
==
chunks
-
1)
{
//
刪除分片文件夾
FileUtil.deleteDirectory(chunkDirPath);
return
RETURN.success("上傳成功",
1);
}
else
{
return
RETURN.fail("上傳中...",
1);
}
}
/**
*
未分片上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
UnChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
//
String
fileMd5
=
uploadVO.getFileMd5();
//
文件上傳
File
destFile
=
new
File(UPLOAD_PATH
+
File.separator
+
fileName);
if
(file
!=
null
&&
!file.isEmpty())
{
//
上傳目錄
File
fileDir
=
new
File(UPLOAD_PATH);
if
(!fileDir.exists())
{
fileDir.mkdirs();
}
if
(destFile.exists())
{
destFile.delete();
}
try
{
file.transferTo(destFile);
return
RETURN.success("上傳成功",
0);
}
catch
(Exception
e)
{
LOG.error("文件上傳出錯",
e);
return
RETURN.fail("文件上傳出錯",
0);
}
}
return
RETURN.fail("上傳失敗",
0);
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:Vue2.0結合webuploader實現文件分片上傳功能使用WebUploader實現分片斷點上傳文件功能（二）webuploader在springMVC+jquery+Java開發環境下的大文件分片上傳的實例代碼jQuery
webuploader分片上傳大文件