input type="file" 的一些問題

file可以上傳文件，但通常 情況下大家都會需要設置文件上傳的格式

上傳文件的格式由一個 accept 屬性來控制 列如：

<input type="file" id="file" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"  name="uploadFile"/>

上面這個是只可以上傳excel 表格限制的設置方式，兩個格式之間用 ， 隔開

常用的一些類型

后綴名 MIME名稱 *.3gpp audio/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

file文件里面還有一個重要的屬性 required 設置未上傳文件時不能上傳，建議只有一個提交按鈕時使用，如果有兩個按鈕，只需限制其中一個時候，可以使用
js來完成 
html：

<form action="#" th:action="@{/hosts}" method="post" enctype="multipart/form-data" class="hostform">
<input type="file" id="file" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" name="uploadFile"/>
<input type="submit" value="導入" name="import" class="imp"/>
<input type="submit" value="導出" name="export"/>
<br><br>
</form>

js：

$(".imp").attr({"disabled":"disabled"});
var file = $("#file").val();
$("#file").change(function(){
if (file == null||file == ""){
$(".imp").removeAttr("disabled");
return;
}
})

這里使用到了disabled 屬性 ，它是用來禁用input  ，注 disabled屬性無法與<input type="hidden">一起使用

 

本文為本人用來記錄自己做的一些東西，如有不對的地方，請見諒。    你是我支撐下去的理由