1.6 文件上傳組件
1.6.1 基本形制
<input type="file" name="myfile"/>

form的完整形制如下，它必須設定ENCTYPE="multipart/form-data"，才能進行文件提交。

<form name="form1" action="uploadFile.html" method="post" ENCTYPE="multipart/form-data">
?? ?<input type="file" name="myfile"/><br/>
?? ?<input type="submit" value="upload"><br/>
</form>

1.6.2 常用屬性
1.6.2.1 類型type
type="file"說明這個控件是一個文件上傳組件，由一個文本框和一個按鈕組合而成。

1.6.2.2 名稱name
name是文件上傳組件名，是后臺服務器負責處理文件的部分與前臺上傳組件聯系的唯一途徑。

前臺需要通過它告知后臺，后臺需要它了解前臺。

詳情請參考1.6.4.1中<input type="file" name="myfile"/>和@RequestParam("myfile") MultipartFile file的對應關系

以及1.6.4.2中多個<input type="file" name="myfile"/>和@RequestParam("myfile") MultipartFile[] files的對應關系

1.6.2.3 寬度size
這個屬性決定了顯示文件路徑的文本框的可見字符數，默認20。這個間接確定了此控件的寬度。

1.6.3 JS操作
1.6.3.1 取值
文件上傳組件的value屬性可以得到文件全路徑文件名，如果沒有選擇文件則會得到零長度字符串。
var file=document.getElementsByName("myfile")[0];
alert(file.value);
注意用JS對value賦值無效。

1.6.3.2 創建
以下代碼實現了動態創建文件上傳組件并加入到一個div中
var div=document.getElementById("myDiv");

var file1=document.createElement("input");
file1.type="file";
file1.name="myfile";

div.appendChild(file1);
div.appendChild(document.createElement("br"));

?

1.6.3.3 檢查是否已經選擇了文件

對文件選擇組件的value進行查看可以知道它是否已經選擇了文件。

HTML代碼，其中有四個同名文件選擇組件。

??? <form method="post" enctype="multipart/form-data">
?? ??? ?<input type="file" name="myfile"/><br>
?? ??? ?<input type="file" name="myfile"/><br>
?? ??? ?<input type="file" name="myfile"/><br>
?? ??? ?<input type="file" name="myfile"/>
?? ?</form>

?

JS代碼，用以檢查上面的四個同名文件選擇組件是否選擇了文件：

function checkFile(){
?? ?var arr=document.getElementsByName("myfile");
?? ??? ??? ?
?? ?for(var i=0;i<arr.length;i++){
?? ??? ?var s=arr[i].value;
?? ??? ?if(s==""){
?? ??? ??? ?alert("Please choose a file.");
?? ??? ??? ?arr[i].focus();
?? ??? ??? ?return;
?? ??? ?}
?? ?}

?? ?alert('ok');
}

1.6.4 后臺響應（SpringMVC負責處理請求）
1.6.4.1 單文件方案
這個方案里前臺組件名和后臺file是一一對應的關系，所以一個文件上傳組件名對一個MultipartFile變量，雙方通過name建立聯系。
前臺：
<form name="form1" action="uploadFile.html" method="post" ENCTYPE="multipart/form-data">
?? ?<input type="file" name="myfile"/><br/>
?? ?<input type="submit" value="upload"><br/>
</form>
后臺：
@Controller
public class WebController{
?? ?@RequestMapping(value="/uploadFile")
?? ?public String uploadPosdetailFile(@RequestParam("myfile") MultipartFile file,HttpServletRequest request,HttpServletResponse response){
?? ??? ?try {
?? ??? ??? ?String uploadFileName=file.getOriginalFilename();
?? ??? ??? ?request.setAttribute("uploadFileName", uploadFileName);
?? ??? ??? ?
?? ??? ??? ?return "/pages/sample/index.jsp";
?? ??? ?} catch (Exception e) {
?? ??? ??? ?e.printStackTrace();
?? ??? ??? ?
?? ??? ??? ?return "pages/error/index.jsp";
?? ??? ?}
?? ?}
}

1.6.4.2 多文件方案
前臺：
下面代碼能創建多個文件上傳組件，所以后臺必須是數組形式
<form name="form1" action="muploadFile.html" method="post" ENCTYPE="multipart/form-data">
?? ?<input type="file" name="myfile"/><br/>
?? ?<input type="submit" value="upload"><br/>
?? ?
?? ?<div id="myDiv"></div>
</form>

<button οnclick="addmore()">Add</button>
<script language="javascript" charset="utf-8">
<!--

function addmore(){
?? ?var div=document.getElementById("myDiv");

?? ?var file1=document.createElement("input");
?? ?file1.type="file";
?? ?file1.name="myfile";
?? ?
?? ?div.appendChild(file1);
?? ?div.appendChild(document.createElement("br"));
}


//-->
</script>

后臺：
注意下面files變成了數組形式，以因對前臺可能存在多個文件上傳組件的可能。
@Controller
public class WebController{
?? ?@RequestMapping(value="/muploadFile")
?? ?public String muploadFile(@RequestParam("myfile") MultipartFile[] files,HttpServletRequest request,HttpServletResponse response){
?? ??? ?try {
?? ??? ??? ?int i=1;
?? ??? ??? ?for(MultipartFile file:files){
?? ??? ??? ??? ?String uploadFileName=file.getOriginalFilename();
?? ??? ??? ??? ?System.out.println(i+":"+uploadFileName);
?? ??? ??? ??? ?i++;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?//request.setAttribute("uploadFileName", uploadFileName);
?? ??? ??? ?
?? ??? ??? ?return "/pages/sample/index.jsp";
?? ??? ?} catch (Exception e) {
?? ??? ??? ?e.printStackTrace();
?? ??? ??? ?
?? ??? ??? ?return "pages/error/index.jsp";
?? ??? ?}
?? ?}
}

版權所有，轉載請注明作者出處。

2016年8月2日0:13:42

總結

以上是生活随笔為你收集整理的1.6 文件上传组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。