菜鳥工程師的Liferay Portal學習筆記

html5在 input type=file 這個tag裡加了多重上傳的功能，可以實現簡易型的多重上傳；

 

首先在jsp檔內加入以下的tag；

<input type="file" name="file[]" multiple="multiple" required="required" draggable="true" />

最大的不同就是name的部份加上了陣列的表示，如此一來便會將選擇的檔案以陣列的形式傳送至後端，並且要設定 multiple="multiple"就可使用。

此外還有許多的Api可以用，在這裡設定了required檔案不能為空，以及draggable可允許使用者拖拉檔案至上傳欄位如下圖；

 

可按shift一次選擇多檔，或是直接將檔案拉入上傳欄位；

 

 

基本上只要這樣就可以做submit的動作了，而後端寫入的方法稍有改變；

 

file = uploadRequest.getFiles("file[]");
submissionFileName = uploadRequest.getFileNames("file[]");
streamArray = uploadRequest.getFilesAsStream("file[]");

 

宣告了三個不同類型的陣列，並抓取前端檔案name陣列存入，然後再使用迴圈取值就可以進行寫入了；

 

int i=0;
for(File f:file){

size = f.length();
is = streamArray[i];
sourceFileName = submissionFileName[i];
mimeType = MimeTypesUtil.getContentType(submissionFileName[i]);

i++

.....以下略

 

如此一來基本的多重檔案上傳功能就完成了，這應該是首次能夠體驗到html5的強大之處吧!