file可以上传文件,但通常 情况下大家都会需要设置文件上传的格式

上传文件的格式由一个 accept 属性来控制 列如:

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

上面这个是只可以上传excel 表格限制的设置方式,两个格式之间用 , 隔开

常用的一些类型

  1. 后缀名 MIME名称
  2. *.3gpp audio/3gpp, video/3gpp
  3. *.ac3 audio/ac3
  4. *.asf allpication/vnd.ms-asf
  5. *.au audio/basic
  6. *.css text/css
  7. *.csv text/csv
  8. *.doc application/msword
  9. *.dot application/msword
  10. *.dtd application/xml-dtd
  11. *.dwg image/vnd.dwg
  12. *.dxf image/vnd.dxf
  13. *.gif image/gif
  14. *.htm text/html
  15. *.html text/html
  16. *.jp2 image/jp2
  17. *.jpe image/jpeg
  18. *.jpeg image/jpeg
  19. *.jpg image/jpeg
  20. *.js text/javascript, application/javascript
  21. *.json application/json
  22. *.mp2 audio/mpeg, video/mpeg
  23. *.mp3 audio/mpeg
  24. *.mp4 audio/mp4, video/mp4
  25. *.mpeg video/mpeg
  26. *.mpg video/mpeg
  27. *.mpp application/vnd.ms-project
  28. *.ogg application/ogg, audio/ogg
  29. *.pdf application/pdf
  30. *.png image/png
  31. *.pot application/vnd.ms-powerpoint
  32. *.pps application/vnd.ms-powerpoint
  33. *.ppt application/vnd.ms-powerpoint
  34. *.rtf application/rtf, text/rtf
  35. *.svf image/vnd.svf
  36. *.tif image/tiff
  37. *.tiff image/tiff
  38. *.txt text/plain
  39. *.wdb application/vnd.ms-works
  40. *.wps application/vnd.ms-works
  41. *.xhtml application/xhtml+xml
  42. *.xlc application/vnd.ms-excel
  43. *.xlm application/vnd.ms-excel
  44. *.xls application/vnd.ms-excel
  45. *.xlt application/vnd.ms-excel
  46. *.xlw application/vnd.ms-excel
  47. *.xml text/xml, application/xml
  48. *.zip aplication/zip
  49. *.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
  50. 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">一起使用

  1. 本文为本人用来记录自己做的一些东西,如有不对的地方,请见谅。    你是我支撑下去的理由

input type="file" 的一些问题的更多相关文章

  1. input type='file'上传控件假样式

    采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  2. <input type="file">上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...

  3. html中,文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

  4. Android:让WebView支持<input type=”file”…>元素

    最近在做一个活动页面:用户上传一张图片进行缩放.旋转后点击下一步填写内容后生成图片! 做好后经过各种测试是没有问题的,基本没有什么明显BUG,流程都能走通,但是嵌入到APP后,问题就来了! 在IOS上 ...

  5. HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...

  6. 上传文件 隐藏input type="file",用text显示

    <div> <span>上传文件:</span> <input type="file" id="upload_file" ...

  7. 原生HTML5 input type=file按钮UI自定义

    原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...

  8. 【原创】js中input type=file的一些问题

    1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...

  9. 一个漂亮的上传按钮input[type=file]

    ;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...

  10. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

随机推荐

  1. NDEF消息解析实例[转]

      问题:按照NDEF消息格式来解析下列Hex串? D1 02 1F 53 70 91 01 0E 54 02  65 6E 68 65 6C 6C 6F 20 77 6F  72 6C 64 51 ...

  2. H264的coded_block_pattern编码块模式

    1 词汇约定 CodedBlockPatternLuma:一个宏块的亮度分量的coded_block_pattern CodedBlockPatternChroma:一个宏块的色度分量的coded_b ...

  3. C++编程技巧(长期更新)

    1.数组使用 int* p = new int[5](); // 数组新建并全部初始化为0 等价于: int* p; p = new int[5](); int* q = new int[5];    ...

  4. PLSQL 几种游标的用法

    分类: Oracle 1. PL/SQL里的游标可以分为显式和隐式两种,而隐式有分为select into隐式游标和for .. in 隐式游标两种.所以,我们可以认为,有3种游标用法: A. 显式游 ...

  5. Centos安装vncserver服务

    vnc是一款Windows远程桌面软件,其优点是支持跨操作系统的远程图形化控制.下面开始记录第一次安装vnc服务的过程. 1.先检查系统是否有安装VNC服务 [root@localhost ~]# [ ...

  6. linux安装包资源库

    最近发现了一个很不错的linux的rpm资源库,可以在里面找到rpm安装过程中缺失的资源! 网址:http://pkgs.org/

  7. DOS下导入导出MySQL备份

    导入: 1. cd d:\mysql\bin #cd 到 mysql 的 bin 目录下 2. mysql -u root -p mysql_db_name < d:\mysql\data\ba ...

  8. Android Monkey 测试策略【转】

    Monkey 测试针对不同的对象和不同的目的,需要采用不同的测试方案. 首先测试的对象.目的及类型如下: 测试的类型 应用程序的稳定性测试 应用程序的压力测试 测试对象 单一 apk apk 集合 测 ...

  9. webpack - tree shaking

    Tree-shaking with webpack 2 and Babel 6 babel-webpack-tree-shaking Ben Levwis

  10. Maven项目问题

    Maven项目部署 svn检出的为普通项目 1.普通项目转换为Maven项目: 选择项目右击->Maven4MyEclipse->Update Project 2.tomcat项目空间WE ...