HTML5的 input:file上传类型控制
109428次浏览
一、input:file属性
属性值有以下几个比较常用：
accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。
multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。
只能选择png和gif图片
&input id=&fileId1& type=&file& accept=&image/png,image/gif& name=&file& /&
2、multiple
多文件上传
&input id=&fileId2& type=&file& multiple=&multiple& name=&file& /&
3、常用MIME类型
audio/3gpp, video/3gpp
allpication/vnd.ms-asf
audio/basic
application/msword
application/msword
application/xml-dtd
image/vnd.dwg
image/vnd.dxf
image/jpeg
image/jpeg
image/jpeg
text/javascript, application/javascript
application/json
audio/mpeg, video/mpeg
audio/mpeg
audio/mp4, video/mp4
video/mpeg
video/mpeg
application/vnd.ms-project
application/ogg, audio/ogg
application/pdf
application/vnd.ms-powerpoint
application/vnd.ms-powerpoint
application/vnd.ms-powerpoint
application/rtf, text/rtf
image/vnd.svf
image/tiff
image/tiff
text/plain
application/vnd.ms-works
application/vnd.ms-works
application/xhtml+xml
application/vnd.ms-excel
application/vnd.ms-excel
application/vnd.ms-excel
application/vnd.ms-excel
application/vnd.ms-excel
text/xml, application/xml
aplication/zip
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
请看博客：
三、AJAX上传文件
在说到ajax上传文件，之前的文章也有说过（详见：JS学习32：html5拖拽图片批量ajax无刷新进度上传）。ajax上传的时候，需要获得input:file选择的文件（可能为多个文件），获取其文件列表为：
// input标签的files属性
document.querySelector(&#fileId&).files
// 返回的是一个文件列表数组
获得的文件列表，然后遍历插入到表单数据当中。即：
// 获得上传文件DOM对象
var oFiles = document.querySelector(&#fileId&);
// 实例化一个表单数据对象
var formData = new FormData();
// 遍历图片文件列表，插入到表单数据中
for (var i = 0, file = oFiles[i]; i++) {
// 文件名称，文件对象
formData.append(file.name, file);
获得表单数据之后，就可以用ajax的POST上传。
// 实例化一个AJAX对象
var xhr = new XMLHttpRequest();
xhr.onload = function() {
alert(&上传成功！&);
xhr.open(&POST&, &upload.php&, true);
// 发送表单数据
xhr.send(formData);
上传到服务器之后，获取到文件列表为：
[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
在服务端循环遍历这个数组就可以上传文件了。
相关文章：
关键词搜索&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&无标题文档&/title&
只允许输入数字
&input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" &
&input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"&
只允许输入字母
&input type="text" onkeyup="value=value.replace(/[^A-Za-z]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^A-Za-z]/g,''))" &
&input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')"&
只允许输入汉字
&input type="text" onkeyup="value=value.replace(/[^\u4e00-\u9fa5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4e00-\u9fa5]/g,''))" &
&input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')"&
只能输入数字和字母
&input type="text" onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\W]/g,''))" &
&input type="text" onKeyUp="value=value.replace(/[\W]/g,'')"&
只能输入email格式的数据(字母 数字 - _ @)
&input type="text" onkeyup="value=value.replace(/[^a-zA-Z\-_@\.0-9]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^a-zA-Z\-_@\.0-9]/g,''))" &
&input type="text" onKeyUp="value=value.replace(/[^a-zA-Z\-_@\.0-9]/g,'')"&
只允许输入数字和字母和汉字
&input type="text" onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"&
阅读(...) 评论()例如:文件上传时，选择浏览，这时弹出一个选择文件的对话框。我要让这个对话框里面只显示指定后缀的文件，例如*.xml，请大家帮助解决在html页面中如何指定对话框显示的后缀文件？
<dd style="float:cursor:" title="声誉值：1K
该问题被发起重新开启投票
投票剩余时间：
之前被关闭原因：
该问题被发起删除投票
投票剩余时间：
距离悬赏到期还有：
参与关闭投票者：
关闭原因：
该问题已经被锁定
锁定原因：（）
保护原因：避免来自新用户不合宜或无意义的致谢、跟帖答案。
该问题已成功删除，仅对您可见，其他人不能够查看。
可以使用accept属性&input type="file" accept="image/gif, image/jpeg" &如果不限制图像的格式，可以写为：accept="image/*"。accept：MIME_type
用逗号隔开的 MIME 类型列表。
不是您所需，查看更多相关问题与答案
<a href="http://www./search/q/html 显示"html 显示"<",
德问是一个专业的编程问答社区，请
后再提交答案
关注该问题的人
共被浏览 (10106) 次iis7如何添加mime类型支持所有后缀名文件的方法
在iis7中默认的mime类型并不包含所有的后缀名文件，像现在比较热门的apk，ipa文件都是需要手动添加的。至于添加的方法百度一下大家就都知道到了，这里小编要说的是，如果你的iis7中有很多个网站都需要设置mime类型，然后每个都要设置一遍apk，ipa，3gp等这样的后缀名的话，会觉的有点繁琐，而且容易忘记设置了哪些mime类型，那么，用小编的方法，添加一个mime类型就能支持所有的后缀名文件了哦。1，打开iis7，选择你要设置网站，打开mime类型选项2，找到.rar的mime类型，复制他的类型3，复制后选项添加，在文件扩展名那一栏填入.*，然后在下面的mime类型复制你刚复制的application/octet-stream，然后点击确定这样就搞定了，嘿嘿，其实懂电脑的都知道.*的意思就是支持所有扩展名的文件，只要添加了这个类型，那么apk，ipa，3gp等扩展名就都支持了，怎么样，简单吧。
阅读本文后您有什么感想? 已有
人给出评价!
13-05-0312-10-1511-07-0811-05-1511-05-1510-01-0909-01-0308-12-31
注：您的评论需要经过审核才会显示出来
Copyright &
PC6下载().All Rights Reserved
备案编号:湘ICP备号2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2013年9月 其他开发语言大版内专家分月排行榜第二2013年8月 其他开发语言大版内专家分月排行榜第二2013年7月 其他开发语言大版内专家分月排行榜第二2011年4月 PHP大版内专家分月排行榜第二
2013年10月 PHP大版内专家分月排行榜第三2013年5月 PHP大版内专家分月排行榜第三2013年4月 其他开发语言大版内专家分月排行榜第三2013年4月 PHP大版内专家分月排行榜第三2013年3月 其他开发语言大版内专家分月排行榜第三2011年5月 PHP大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。