HTML5的 input:file上传类型控制

2014年8月29日  3159次浏览

一、input:file属性

属性值有以下几个比较常用：

accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。

multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。

1、accept

只能选择png和gif图片

<input id="fileId1"type"file"accept"image/png,image/gif"name />

2、multiple

多文件上传

"fileId2"multiple"multiple" 3、常用MIME类型 
 
后缀名 MIME名称 *.3gpp audio/3gpp, video*.ac3 audio/ac3 asf allpicationvnd.ms-asf au audiobasic css textcss csv textcsv doc applicationmsword dot applicationdtd applicationxmldtd dwg imagedwg dxf imagedxf gif imagegif htm texthtml html textjp2 imagejp2 jpe imagejpeg jpeg imagejpg imagejs textjavascript applicationjavascript json applicationjson mp2 audiompegmpeg mp3 audiomp4 audiomp4mp4 mpeg videompg videompp applicationproject ogg applicationoggogg pdf applicationpdf png imagepng pot applicationpowerpoint pps applicationppt applicationrtf applicationrtf textrtf svf imagesvf tif imagetiff tiff imagetxt textplain wdb applicationworks wps applicationxhtml applicationxhtml+xml xlc applicationexcel xlm applicationxls applicationxlt applicationxlw applicationxml textzip aplicationzip 
 
 
 二、样式美化
 
 
 请看博客：css input[type=file] 样式美化，input上传按钮美化 http://www.haorooms.com/post/css_input_uploadmh
 
 
 三、AJAX上传文件
 
 
 在说到ajax上传文件，之前的文章也有说过（详见：JS学习32：html5拖拽图片批量ajax无刷新进度上传）。ajax上传的时候，需要获得input:file选择的文件（可能为多个文件），获取其文件列表为：
 
 
// input标签的files属性 documentquerySelector("#fileId").files // 返回的是一个文件列表数组
 
 
 获得的文件列表，然后遍历插入到表单数据当中。即：
 
 
// 获得上传文件DOM对象 var oFiles =); // 实例化一个表单数据对象 formData new FormData();// 遍历图片文件列表，插入到表单数据中for( i  0 file; file  oFiles[i]; i++){// 文件名称，文件对象 formDataappend(filename}
 
 
 获得表单数据之后，就可以用ajax的POST上传。
 
 
// 实例化一个AJAX对象 xhr XMLHttpRequest xhronload function() alert"上传成功！"}open"POST" "upload.PHP"true// 发送表单数据sendformData);
 
 
 上传到服务器之后，获取到文件列表为：
 
 
Arrayjpg_jpg]=> jpgjpg type imagetmp_name D:\xampp\tmp\PHPA595tmp error0size133363)png_png png\xampp\tmp\PHPA5A61214628)
 
 
 在服务端循环遍历这个数组就可以上传文件了。