【转】HTML5的 input:file上传类型控制

一、input:file属性

属性值有以下几个比较常用:

accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表。

multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径。

1、accept

只能选择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类型

后缀名       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

二、样式美化

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

三、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; 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);

上传到服务器之后,获取到文件列表为:

Array
(
    [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
        )

)

在服务端循环遍历这个数组就可以上传文件了。

转载地址:http://www.haorooms.com/post/input_file_leixing

时间: 2024-11-05 16:04:40

【转】HTML5的 input:file上传类型控制的相关文章

HTML5的 input:file上传类型控制

一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径. 1.accept 只能选择png和gif图片 <input id="fileId1" type="file" accept="image/png,image/gif" name="

FileUpload系列:(4)HTML5的 input:file上传类型控制

网页上添加一个input file HTML控件: <input id="File1" type="file" /> 默认情况下,所有文件类型都会显示出来,如果想限制它只显示特定的文件类型呢,比如"word","excel","pdf"文件 解决办法是可以给它添加一个accept属性,比如: <input id="File1" type="file"

有关图片上传的相关知识input type=file,HTML5的 input:file上传类型控制

遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://www.cnblogs.com/sunliyuan/p/5737928.html http://blog.okbase.net/jquery2000/archive/1296.html(解释的也很清楚) http://blog.csdn.net/qingyjl/article/details/52003

HTML5的 input:file上传 样式美化及表单异步提交

样式美化请看博客:css input[type=file] 样式美化,input上传按钮美化 input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. DOM结构: <a href="javascript:;" class="a-upload"> <input type="file" name="" id="">

在HTML5的 input:file 上传文件类型控制 遇到的问题

1.input:file 属性的介绍  先瞅代码吧 <form> <input type="file" name="pic" accept="image/gif,image.jpg" multiple="multiple"/> </form> accept: 一般是指 上传文件的MIME类型. 文件类型MIME 列表  链接(我个人觉得比较全的地方) multipe: 是指多文件上传 2.工

ajax+ashx 完美实现input file上传文件

1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效果图: Chrome效果图:   2.input file上传按钮美化 css: .file{ position: relative; background-color: #b32b1b; border: 1px solid #ddd; width: 68px; height: 25px; display:

如何用一张图片代替 &#39;input:file&#39; 上传本地文件??

今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的:  如何用一张图片代替 'input:file' 上传本地文件?? 因为默认的 <input type='file'> 上传文件控件样式特别丑,需要换成自定义的图片,如何实现这个功能?? 也就是,将这个玩意: 换成这样的: 当时我还讲了一下label与input之间的绑定关系,问到这个的时候竟然脑袋短路一时没想到label这玩意儿??label作为一

input file上传表单美化file按钮美化篇

一.表单input file样式说明   -   TOP 本上传表单特效是使用纯DIV+CSS代码实现,兼容各大浏览器,使用方便在此美化基础上稍加CSS美化将获得更好的美化效果,也就是通过DIV CSS样式美化上传表单控件. 二.CSS file美化后效果图   -   TOP file表单美化效果图 支持多浏览器与老旧版本浏览器,测试IE6-IE8 火狐.谷歌浏览器均兼容. 三.所有HTML+CSS代码:   -   TOP <!DOCTYPE html PUBLIC "-//W3C//

mvc4 使用input:file上传文件

@using (Html.BeginForm("AddNews", "NewsMgr", FormMethod.Post, new { enctype = "multipart/form-data" })) 前台页面上使用form提交,但是HtmlAttribute必须有这个属性 enctype = "multipart/form-data" 否则上传时提交到后台的Request.Files一直为空,count是0. 后台页面