HTML5的 input:file上傳類型控制
2014年8月29日94745次瀏覽
一、input:file屬性
屬性值有以下幾個比較常用：
accept：表示可以選擇的文件MIME類型，多個MIME類型用英文逗號分開，常用的MIME類型見下表。
multiple：是否可以選擇多個文件，多個文件時其value值為第一個文件的虛擬路徑。
1、accept
只能選擇png和gif圖片
2、multiple
多文件上傳
3、常用MIME類型
后綴名MIME名稱*.3gppaudio/3gpp,video/3gpp*.ac3? ? audio/ac3*.asf? ? ? allpication/vnd.ms-asf*.au? ? ? ? ? audio/basic*.css? ? ? ? ? text/css*.csv? ? ? ? ? text/csv*.doc? ? application/msword*.dot? ? application/msword*.dtd? ? application/xml-dtd*.dwg? ? image/vnd.dwg*.dxf? ? ? image/vnd.dxf*.gif? ? ? ? ? ? image/gif*.htm? ? text/html*.html? ? text/html*.jp2? ? ? ? ? ? image/jp2*.jpe? ? ? image/jpeg*.jpeg? ? image/jpeg*.jpg? ? ? ? ? image/jpeg*.js? ? ? text/javascript,application/javascript*.json? ? application/json*.mp2? ? audio/mpeg,video/mpeg*.mp3? ? audio/mpeg*.mp4? ? audio/mp4,video/mp4*.mpeg? ? video/mpeg*.mpg? ? video/mpeg*.mpp? ? application/vnd.ms-project*.ogg? ? application/ogg,audio/ogg*.pdf? ? application/pdf*.png? ? image/png*.pot? ? application/vnd.ms-powerpoint*.pps? ? application/vnd.ms-powerpoint*.ppt? ? application/vnd.ms-powerpoint*.rtf? ? ? ? ? ? application/rtf,text/rtf*.svf? ? ? ? ? image/vnd.svf*.tif? ? ? ? image/tiff*.tiff? ? ? image/tiff*.txt? ? ? ? ? text/plain*.wdb? ? application/vnd.ms-works*.wps? ? application/vnd.ms-works*.xhtml? ? application/xhtml+xml*.xlc? ? ? application/vnd.ms-excel*.xlm? ? application/vnd.ms-excel*.xls? ? ? ? ? application/vnd.ms-excel*.xlt? ? ? application/vnd.ms-excel*.xlw? ? ? application/vnd.ms-excel*.xml? ? text/xml,application/xml*.zip? ? ? ? ? ? aplication/zip*.xlsx? ? application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
二、樣式美化
請看博客：css input[type=file] 樣式美化，input上傳按鈕美化http://www.haorooms.com/post/css_input_uploadmh
三、AJAX上傳文件
在說到ajax上傳文件，之前的文章也有說過（詳見：JS學(xué)習(xí)32：html5拖拽圖片批量ajax無刷新進度上傳）。ajax上傳的時候，需要獲得input:file選擇的文件（可能為多個文件），獲取其文件列表為：
// input標簽的files屬性document.querySelector("#fileId").files// 返回的是一個文件列表數(shù)組
獲得的文件列表，然后遍歷插入到表單數(shù)據(jù)當中。即：
// 獲得上傳文件DOM對象varoFiles=document.querySelector("#fileId");// 實例化一個表單數(shù)據(jù)對象varformData=newFormData();// 遍歷圖片文件列表，插入到表單數(shù)據(jù)中for(vari=0,file;file=oFiles[i];i++){// 文件名稱，文件對象formData.append(file.name,file);}
獲得表單數(shù)據(jù)之后，就可以用ajax的POST上傳。
// 實例化一個AJAX對象varxhr=newXMLHttpRequest();xhr.onload=function(){alert("上傳成功！");}xhr.open("POST","upload.php",true);// 發(fā)送表單數(shù)據(jù)xhr.send(formData);
上傳到服務(wù)器之后，獲取到文件列表為：
Array([jpg_jpg]=>Array([name]=>jpg.jpg[type]=>image/jpeg[tmp_name]=>D:\xampp\tmp\phpA595.tmp[error]=>0[size]=>133363)[png_png]=>Array([name]=>png.png[type]=>image/png[tmp_name]=>D:\xampp\tmp\phpA5A6.tmp[error]=>0[size]=>1214628))
在服務(wù)端循環(huán)遍歷這個數(shù)組就可以上傳文件了。
