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">一起使用



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

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. 从excel读数据到informix的Found a quote for which there is no matching quote错误

    我从excel读取数据,然后存储到Informix数据库里.偶尔会发现出现Found a quote for which there is no matching quote这个错误.调试后发现,是因 ...

  2. (ASP.NET )去除字符串中的HTML标签

    string strDoContent = "执行增加<a href="/AdminCX/Admin_CompanyDetail.aspx?CompanyGuid=cd8e1 ...

  3. 反射机制(reflection)动态相关机制

    功能:动态获取类的信息以及动态调用对象的方法. Java反射机制主要提供了以下功能: 1.在运行时判断任意一个对象所属的类. 2.在运行时构造任意一个类的对象. 3.在运行时判断任意一个类所具有的成员 ...

  4. UEFI主板GPT方式安装CentOS6.4

    1. 设置BIOS:禁用CSM,禁用安全启动:      或不用禁用CSM,但以EFI方式安装系统: 2. 使用Diskgen或类似工具把硬盘格式为GPT格式(可以建立多于4个的主分区了): 3. 官 ...

  5. PyCharm 安装指南

    一.官网下载最新版的PyCharm,根据平台选择版本(Liunx,Windows) 地址:https://www.jetbrains.com/pycharm/download/#section=win ...

  6. IIS 7如何实现http重定向https

    转自[http://blog.csdn.net/xuhuojun/article/details/6137154] 在不少的企业当中,网站设计出于安全的考虑使用了https协议,但同时公司也开放了80 ...

  7. 二.创建maven工程及下载需要的jar包

    1.使用Eclipse的Maven插件来创建一简单的Maven项目 步骤:打开新建项目对话框,选择Maven Project(File->New->Object->Maven-> ...

  8. rune is alias of int32

    I think chendesheng's quote gets at the root cause best: Go uses a lot of signed values, not just fo ...

  9. Junit单元测试对线程测试没反应

    今天还想简单写写线程的东西,结果刚刚写完我就懵逼了. 结果啥都没有输出,而用主方法运行就可以输出.没办法,只有度年来寻求自己的答案了 结果各方面的了解,我算是有个了解了. 首先来看看代码 packag ...

  10. 使用vs2010打开VS2013的工程文件

    在开发团队,会出现vs工具使用版本的不一样的情况.我的电脑使用的是VS2010,可是其他人员使用的是vs2013. 要打开其他人员上传的工程文件,可以通过三种方式: 1.下载一个vs2013版本. 2 ...