HTML5的 input:file上传以及类型控制

以HTML5的文件上传API

如下demo代码在.html文件打开即可：

!DOCTYPE html>

<html lang="zh_cn">

<head>

    <meta charset="UTF-8">

    <title>HTML5文件上传FileReader API</title>

</head>

<body>

<!--一个能上传多媒体文件的表单-->

<input type="file" id="upload-file" multiple />

<!--显示图片的地方-->

<div id="destination"></div>

<script>

    document.getElementById('upload-file').addEventListener('change', function() {

        var file;

        var destination = document.getElementById('destination');

        destination.innerHTML = '';//每次清空内容

        // 循环用户多选的文件

        for(var x = 0, xlen = this.files.length; x < xlen; x++) {

            file = this.files[x];

            console.log(file);

            if(file.type.indexOf('image') != -1) { // 非常简单的交验，判断文件是否是图片

                var reader = new FileReader();//文件预览对象

                reader.readAsDataURL(file);//设置要预览的文件

                reader.onload = function(e) {//监听文件加载完成事件

                    var img = new Image();//创键预览图片

                    img.src = e.target.result; //把预览图片的src设置为e.target.result属性。返回预览文件的二进制内存数据

                    destination.appendChild(img);//在把每张图片，放到预览区域

                };

            }

        }

    });

</script>

</body>

</html>

一、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上传文件。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

H5文件上传

HTML5的 input:file上传以及类型控制的更多相关文章

在HTML5的 input:file 上传文件类型控制遇到的问题
1.input:file 属性的介绍先瞅代码吧 <form> <input type="file" name="pic" accept=& ...
input file 上传文件类型控制
文件类型 accept *.3gpp audio/3gpp, video/3gpp.ac3 audio/ac3.asf allpication/vnd.ms-asf.au audio/basic.cs ...
HTML5的 input:file上传类型控制(转载）
http://www.haorooms.com/post/input_file_leixing HTML5的 input:file上传类型控制 2014年8月29日 66352次浏览一.input: ...
HTML5的 input:file上传类型控制
一.input:file属性属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...
有关图片上传的相关知识input type=file，HTML5的 input:file上传类型控制
遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://ww ...
input:file上传文件类型(记录)
imput 属性有以下几种: 1.type:input类型这就不多说了2.accept:表示可以选择的文件类型,多个类型用英文逗号分开,常用的类型见下表. <input id="fil ...
HTML5: input:file上传类型控制
ylbtech-HTML5: input:file上传类型控制 1. 一.input:file 属性返回顶部一.input:file属性属性值有以下几个比较常用: accept:表示可以选择的 ...
ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
如何用一张图片代替 'input:file' 上传本地文件??
今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的: 如何用一张图片代替 'input:file' 上传 ...

随机推荐

[转帖]DevOps/TestOps概念
发现收藏不好用..还是转吧.. https://www.cnblogs.com/fnng/p/8232410.html DevOps/TestOps概念 2018-01-07 22:02 by 虫师, ...
Linux基础学习（7）--用户和用户组管理
第七章——用户和用户组管理一.用户配置文件 1.用户信息文件/etc/passwd: (1)用户管理简介:所以越是对服务器安全性要求高的服务器,越需要建立合理的用户权限等级制度和服务器操作规范. ...
Java多线程之原子性 volatile、atomicInteger测试
原文链接:http://www.cnblogs.com/zhengbin/p/5653051.html 一.补充概念 1.什么是线程安全性? <Java Concurrency in Pract ...
Lodop打印条码二维码设置多宽不一定是多宽
Lodop输出二维码和条码,可用如下语句,其中下面的width和height参数,设置了条码或二维码多宽,会发现可能不是设置的宽度或高度.ADD_PRINT_BARCODE(Top,Left,Widt ...
docker --swarm创建一个集群
如果搭建错误可以强制脱离集群网络: docker swarm leave --force 初始化集群网络管理节点: docker swarm init --advertise-addr 10.101. ...
Luogu3804 【模板】后缀自动机（后缀自动机）
建出parent树统计即可.开始memcpy处写的是sizeof(son[y]),然后就T掉了……还是少用这种东西吧. 同时也有SA做法.答案子串一定是名次数组中相邻两个串的lcp.单调栈统计其是几个 ...
day14 装饰器
装饰器本质上就是函数,功能是为其他函数添加附加功能原则:不修改被修饰函数的源代码,以及调用方式,即完全不能有任何改变装饰器 = 高阶函数+ 函数嵌套+ 闭包高阶函数:函数作为参数或者返回一个函 ...
java常见面试题及答案
java常见面试题及答案来源 https://blog.csdn.net/hsk256/article/details/49052293 来源 https://blog.csdn.net/hsk25 ...
牛客练习赛小D的Lemon 解题报告
小D的Lemon 题意已知 \[ g(x)=\left\{\begin{matrix} 1&,x=1\\ \sum_{i=1}^qk_i&,otherwise \end{matrix ...
RMQ求解->ST表
ST表这是一种神奇的数据结构,用nlogn的空间与nlongn的预处理得出O(1)的区间最大最小值(无修) 那么来看看这个核心数组:ST[][] ST[i][j]表示从i到i+(1<<j ...

HTML5的 input:file上传 以及 类型控制