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">一起使用
本文为本人用来记录自己做的一些东西,如有不对的地方,请见谅。 你是我支撑下去的理由
input type="file" 的一些问题的更多相关文章
- input type='file'上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- <input type="file">上传文件并添加路径到数据库
注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...
- html中,文件上传时使用的<input type="file">的样式自定义
Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...
- Android:让WebView支持<input type=”file”…>元素
最近在做一个活动页面:用户上传一张图片进行缩放.旋转后点击下一步填写内容后生成图片! 做好后经过各种测试是没有问题的,基本没有什么明显BUG,流程都能走通,但是嵌入到APP后,问题就来了! 在IOS上 ...
- HTML <input type="file">上传文件——结合asp.net的一个文件上传示例
HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...
- 上传文件 隐藏input type="file",用text显示
<div> <span>上传文件:</span> <input type="file" id="upload_file" ...
- 原生HTML5 input type=file按钮UI自定义
原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...
- 【原创】js中input type=file的一些问题
1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...
- 一个漂亮的上传按钮input[type=file]
;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
随机推荐
- Android打开某个activity时自动弹出输入法键盘
最近在做一个可以让用户修改自己账户资料的activity,具体是打开后有一个EditText,然后用户可以在这里输入相关信息,但是做好后发现,进入这个activity时系统并没有自动弹出输入法键盘,于 ...
- HDU 5839 Special Tetrahedron
HDU 5839 Special Tetrahedron 题目链接http://acm.hdu.edu.cn/showproblem.php?pid=5839 Description Given n ...
- 集线器(HUB),交换机,和路由器的区别
交换机与集线器的区别从大的方面来看可以分为以下三点: 1.从OSI体系结构来看,集线器属于OSI第一层物理层设备,而交换机属于OSI的第二层数据链路层设备.也就意味着集线器只是对数据的传输起到同步.放 ...
- 回滚 rollback
为了保证在应用程序.数据库或系统出现错误后,数据库能够被还原,以保证数据库的完整性,所以需要进行回滚. 回滚(rollback)就是在事务提交之前将数据库数据恢复到事务修改之前数据库数据状态. 回滚执 ...
- Delphi @ # $ 特殊字符含义
^: 指针 @: 取址 #: 十进制符 $: 十六进制符
- Java 服务器端手机验证码sdk
感谢巨人们,站在巨人的肩膀上. 参考: http://blog.sina.com.cn/s/blog_80a6423d0102wm74.html#commonComment 1 点击生成验证码,发送到 ...
- C# TextBox中的Validating与Validated事件[转]
validating事件发生的时候,值还没有被真正存入,所以是空的,而validated事件发生的时候,值已经存入,所以能取出:一个相当于值的前因,一个相当于值的后果.也就是说,可以用validati ...
- Recover the String
Recover the String 题目链接:http://codeforces.com/contest/709/problem/D 构造 这题乍一看很难构造,但是如果知道了整个字符串中'0'和'1 ...
- Node.js:EventEmitter
概要:本篇博客主要介绍EventEmitter Node.js所有的异步I/O操作在完成时都会发送一个事件到事件队列.事件由EventEmitter对象提供.下面通过一个例子来说明EventEmitt ...
- JavaScript的计时器对象
1.JavaScript计时器,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行. 计时器类型: 1)一次性计时器:仅在指定的延迟时间之后触发一次. 2)间隔性触发计时 ...