注意:
只支持IE10+,连IE9都不支持,o(︶︿︶)o
获取文件的各种属性只能用原生的js,jq不支持。
eg:document.getElementById("file").files[1].name
其中document.getElementById(“file”).files 会获取一个数组,数组中的元素拥有的属性有lastModifiedDate,name,size,type,length、webkitRelativePath。
前台页面:
- 在input标签中加入 multiple 属性,可以在一个输入框中选择多个文件进行上传
<input type="file" name="uploadfile" id="files" multiple="multiple" />
或者简写:
<input type="file" name="uploadfile" id="files" multiple/>
- 很多时候上传的时候,我们要限制一下上传文件类型(在windows中主要是限制后缀名) 这需要用js取得选择文件的名字:
document.getElementById("files").files[i].name
- 需要用form提交,点击上传图片动作触发下面代码,进行自己的逻辑处理
function upload(){
var files = document.getElementById("files").files;
for(var i=0; i< files.length; i++){
alert(input.files[i].name);
}
}
后台接收:
使用的是Java:spring+springmvc框架
controller接收层代码如下:
@RequestParam(“uploadfile”)中的名字必须和前台页面的name值相同
@RequestMapping("/saveFiles.do")
public String saveFiles(MultipartHttpServletRequest request,@RequestParam("uploadfile") MultipartFile[] uploadfile){
//循环数组得到文件并保存
for(int i = 0; i < uploadfile.length; i++){
MultipartFile multipartFile = uploadfile[i];//循环得到每个文件
String name= uploadfile[i].getOriginalFilename();//获取文件名
String path=request.getSession().getServletContext().getRealPath("/uploadFile");//文件路径
File pathFile = new File(path);//创建file对象
if(!pathFile.exists()){//如果不存在
pathFile.mkdirs();//创建文件夹并且上传文件
file.transferTo(new File(path+name));//文件保存
return true;
}
}
}
ok,到此结束,希望对大家有用,如有不对的地方,希望大家多多指教。
人生当自勉,学习需坚持。从这一刻开始,我依旧是我,只是心境再不同。不论今后的路如何,我都会在心底默默鼓励自己,坚持不懈,等待那一场破茧的美丽。