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 onclick="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