文件上传的类型选择控制
input-file文件上传及可选文件类型控制
可选类型的控制可以通过input标签中的属性来控制：
<input type="file" multiple="multiple" accept="application/msword,image/jpeg,image/x-ms-bmp,image/x-png" />中的accept表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表：
常用MIME类型：
1 audio/* 接受所有的声音文件。 2 video/* 接受所有的视频文件。 3 image/* 接受所有的图像文件。 4 5 后缀名 MIME名称 6 7 *.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video 8 *.ac3 audio/ac3 AC3 Audio 9 *.asf allpication/vnd.ms-asf Advanced Streaming Format 10 *.au audio/basic AU Audio 11 *.css text/css Cascading Style Sheets 12 *.csv text/csv Comma Separated Values 13 *.doc application/msword MS Word Document 14 *.dot application/msword MS Word Template 15 *.dtd application/xml-dtd Document Type Definition 16 *.dwg image/vnd.dwg AutoCAD Drawing Database 17 *.dxf image/vnd.dxf AutoCAD Drawing Interchange Format 18 *.gif image/gif Graphic Interchange Format 19 *.htm text/html HyperText Markup Language 20 *.html text/html HyperText Markup Language 21 *.jp2 image/jp2 JPEG-2000 22 *.jpe image/jpeg JPEG 23 *.jpeg image/jpeg JPEG 24 *.jpg image/jpeg JPEG 25 *.js text/javascript, application/javascript JavaScript 26 *.json application/json JavaScript Object Notation 27 *.mp2 audio/mpeg, video/mpeg MPEG Audio/Video Stream, Layer II 28 *.mp3 audio/mpeg MPEG Audio Stream, Layer III 29 *.mp4 audio/mp4, video/mp4 MPEG-4 Audio/Video 30 *.mpeg video/mpeg MPEG Video Stream, Layer II 31 *.mpg video/mpeg MPEG Video Stream, Layer II 32 *.mpp application/vnd.ms-project MS Project Project 33 *.ogg application/ogg, audio/ogg Ogg Vorbis 34 *.pdf application/pdf Portable Document Format 35 *.png image/png Portable Network Graphics 36 *.pot application/vnd.ms-powerpoint MS PowerPoint Template 37 *.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow 38 *.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation 39 *.rtf application/rtf, text/rtf Rich Text Format 40 *.svf image/vnd.svf Simple Vector Format 41 *.tif image/tiff Tagged Image Format File 42 *.tiff image/tiff Tagged Image Format File 43 *.txt text/plain Plain Text 44 *.wdb application/vnd.ms-works MS Works Database 45 *.wps application/vnd.ms-works Works Text Document 46 *.xhtml application/xhtml+xml Extensible HyperText Markup Language 47 *.xlc application/vnd.ms-excel MS Excel Chart 48 *.xlm application/vnd.ms-excel MS Excel Macro 49 *.xls application/vnd.ms-excel MS Excel Spreadsheet 50 *.xlt application/vnd.ms-excel MS Excel Template 51 *.xlw application/vnd.ms-excel MS Excel Workspace 52 *.xml text/xml, application/xml Extensible Markup Language 53 *.zip aplication/zip Compressed Archive
Ajax上传：
input标签中的multiple属性可以控制是否可以多选文件，多个文件时其value值为第一个文件的虚拟路径。
上传的时候，需要获得input:file选择的文件（可能为多个文件），获取其文件列表：
1 // input标签的files属性 2 document.querySelector("#fileId").files 3 // 返回的是一个文件列表数组 4 获得的文件列表，然后遍历插入到表单数据当中。即： 5 6 // 获得上传文件DOM对象 7 var oFiles = document.querySelector("#fileId"); 8 // 实例化一个表单数据对象 9 var formData = new FormData(); 10 // 遍历图片文件列表，插入到表单数据中 11 for (var i = 0, file; file = oFiles[i]; i++) { 12 // 文件名称，文件对象 13 formData.append(file.name, file); 14 } 15 获得表单数据之后，就可以用ajax的POST上传。 16 17 // 实例化一个AJAX对象 18 var xhr = new XMLHttpRequest(); 19 xhr.onload = function() { 20 alert("上传成功！"); 21 } 22 xhr.open("POST", "upload.php", true); 23 24 // 发送表单数据 25 xhr.send(formData);
上传到服务器之后，获取到文件列表为：
1 Array 2 ( 3 [jpg_jpg] => Array 4 ( 5 [name] => jpg.jpg 6 [type] => image/jpeg 7 [tmp_name] => D:\xampp\tmp\phpA595.tmp 8 [error] => 0 9 [size] => 133363 10 ) 11 12 [png_png] => Array 13 ( 14 [name] => png.png 15 [type] => image/png 16 [tmp_name] => D:\xampp\tmp\phpA5A6.tmp 17 [error] => 0 18 [size] => 1214628 19 ) 20 )
在服务端循环遍历这个数组就可以上传文件了。
补充：
上传文件的后台处理之判断请求的表单是否为file表单：
获取到List<FileItem>：
@SuppressWarnings("unchecked")
public static List<FileItem> getFileItems(HttpServletRequest request) throws FileUploadException{
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
return upload.parseRequest(request);
}
遍历list，对集合中的FileItem进行判断：
1 FileItem item = its.next(); 2 if(item.isFormField()){ 3 //非file表单 4 }else{ 5 byte[] bt = item.get(); 6 if(bt.length > 4*1024*1024){ 7 JSONObject j = new JSONObject(); 8 j.put("rs", "-1"); 9 j.put("msg", "上传文件不能大于4M"); 10 json.add(j); 11 return json; 12 } 13 files.put(item.getName(), item); 14 }
FileItem.isFormField()方法用来判断FileItem对象里面封装的数据是一个普通文本表单字段，还是一个文件表单字段；如果是普通文本表单字段，返回一个true否则返回一个false。因此可以用该方法判断是否是普通表单域还是文件上传表单域。
今天项目遇到上传文件，特地查了一下如何做可选文件类型的控制并且做了实现，由于类型繁多，在此特做记录也仅做记录以方便以后查看；
来自博客园的一位同行，感谢；
