[转]html5表单上传控件Files API

时间:2022-09-16 11:26:21

表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持。)

1、允许上传文件数量

允许选择多个文件:<input type="file" multiple>

只允许上传一个文件:<input  type="file" single>

2、上传指定的文件格式

<input type="file" accept="image/gif,image/png" />

这里的上传格式仅指打开上传弹窗选择文件时默认的文件格式,可手动修改成其它文件格式。

如果不限制上传图片的格式可写成:accept="image/*"

其它格式参考如下:

*.3gpp audio/3gpp, video/3gpp 3GPP Audio/Video
*.ac3 audio/ac3 AC3 Audio
*.asf allpication/vnd.ms-asf Advanced Streaming Format
*.au audio/basic AU Audio
*.css text/css Cascading Style Sheets
*.csv text/csv Comma Separated Values
*.doc application/msword MS Word Document
*.dot application/msword MS Word Template
*.dtd application/xml-dtd Document Type Definition
*.dwg image/vnd.dwg AutoCAD Drawing Database
*.dxf image/vnd.dxf AutoCAD Drawing Interchange Format
*.gif image/gif Graphic Interchange Format
*.htm text/html HyperText Markup Language
*.html text/html HyperText Markup Language
*.jp2 image/jp2 JPEG-2000
*.jpe image/jpeg JPEG
*.jpeg image/jpeg JPEG
*.jpg image/jpeg JPEG
*.js text/javascript, application/javascript JavaScript
*.json application/json JavaScript Object Notation
*.mp2 audio/mpeg, video/mpeg MPEG Audio/Video Stream, Layer II
*.mp3 audio/mpeg MPEG Audio Stream, Layer III
*.mp4 audio/mp4, video/mp4 MPEG-4 Audio/Video
*.mpeg video/mpeg MPEG Video Stream, Layer II
*.mpg video/mpeg MPEG Video Stream, Layer II
*.mpp application/vnd.ms-project MS Project Project
*.ogg application/ogg, audio/ogg Ogg Vorbis
*.pdf application/pdf Portable Document Format
*.png image/png Portable Network Graphics
*.pot application/vnd.ms-powerpoint MS PowerPoint Template
*.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow
*.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation
*.rtf application/rtf, text/rtf Rich Text Format
*.svf image/vnd.svf Simple Vector Format
*.tif image/tiff Tagged Image Format File
*.tiff image/tiff Tagged Image Format File
*.txt text/plain Plain Text
*.wdb application/vnd.ms-works MS Works Database
*.wps application/vnd.ms-works Works Text Document
*.xhtml application/xhtml+xml Extensible HyperText Markup Language
*.xlc application/vnd.ms-excel MS Excel Chart
*.xlm application/vnd.ms-excel MS Excel Macro
*.xls application/vnd.ms-excel MS Excel Spreadsheet
*.xlt application/vnd.ms-excel MS Excel Template
*.xlw application/vnd.ms-excel MS Excel Workspace
*.xml text/xml, application/xml Extensible Markup Language
*.zip aplication/zip Compressed Archive

3、FileList上传文件数组

FileList对象都是一组文件对象的集合,而文件对象则拥有下列的属性:
name – 文件名(不包含路径)
type – 文件的MIME类型(小写)
size – 文件的尺寸(单位为字节)

lastModifiedDate 为上传文件的最后修改时间

通过上面的几个对象,我们能够控制用户上传的文件大小和文件类型,以便减轻服务器再次检测时的压力,并提升安全系数。

var a=document.getElementById("file");
a.onchange=function(e){
<span style="white-space:pre"> </span>e=e || window.event;
<span style="white-space:pre"> </span>var b=e.target.files;
<span style="white-space:pre"> </span>alert(b[0].name);
}

4、拖动上传

dataTransfer 对象
dropEffect[=sCursorStyle]
设置或获取拖拽操作的类型和要显示的光标类型
copy:复制样式被显示
link:链接样式被显示
move:移动样式被显示
none:默认,没有鼠标样式被定义

effectAllowed[=sEffect]
设置或获取数据传送操作可应用与该对象的源元素
copy 选项被复制
link  选项被dataTransfer作为link方式保存
move  当放置时,对象被移动至目标对象
copylink  选项是被复制还是被作为link方式保存关键在于目标对象
linkmove 选项是被作为link方式保存还是被移动关键在于目标对象
all 所有效果都被支持
none 不支持任何效果
uninitialized 默认不能通过这个属性传递任何值

setData(sFormat,sData)     将指定格式的数据赋值给dataTransfer或者clipboardData     sFormat:URL,Text
getData(sFormat)     从dataTransfer或者clipboardData中获取值     sFormat:URL,Text
clearData([sFormat])     通过dataTransfer或者clipboardData中删除某种格式的数据     sFormat:Text,URL,File,HTML,Image

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#DropZone{border:1px solid #CCC;height:50px;}
</style>
</head>
<body>
<input type="file" multiple accept="image/gif,image/png" id="file">
<div id="DropZone"></div>
<div id="Lists"></div>
<script>
var aa=document.getElementById("file");
aa.onchange=function(){
fileDrop();
} function fileDrop(e) {
e = e || window.event; e.stopPropagation(); // 阻止冒泡
e.preventDefault(); //阻止默认行为 var files = e.dataTransfer.files; //FileList var output = []; for(var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>' + f.name + '</strong>(' + f.type + ') - ' + f.size +' bytes</li>');
} document.getElementById('Lists').innerHTML = '<ul>' + output.join('') + '</ul>';
}; function dragOver(e) {
e = e || window.event; e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; //指定拖放视觉效果
};
var d = document.getElementById('DropZone'); try {
d.addEventListener('dragover', dragOver, false);
d.addEventListener('drop', fileDrop, false)
} catch(ex) {
document.write('something must be wrong!');
} </script>
</body>
</html>

5、FileReader文件预览,读取文件数据(同时可读取图片文件宽高)

FileReader包含四种异步读取文件的方式:
FileReader.readAsBinaryString(Blob|File) - result属性包含的是file/blob的二进制字符串形式的数据。每个字节由一个0-255的整数表示。
FileReader.readAsText(Blob|File, opt_encoding) - result属性包含的是以文本方式表示的file/blob数据。默认情况下,字符串以'UTF-8'编码方式解码。使用opt_encoding参数可以指定一个不同的格式。
FileReader.readAsDataURL(Blob|File) - result属性包含的是以data URL编码的file/blob数据。
FileReader.readAsArrayBuffer(Blob|File) - result属性包含的是以ArrayBuffer对象表示的file/blob数据。
一旦这些read方法被调用,onloadstart, onprogress, onload, onabort, onerror, onloadend就可以被用来追踪进度。

上传图片预览:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
img{vertical-align:bottom;}
</style>
</head>
<body>
<input type="file" multiple accept="image/gif,image/png,,image/jpeg" id="Files">
<div id="Preview"></div>
<ul id="Errors"></ul>
<script>
function fileSelect(e) {
e = e || window.event; var files = e.target.files; //FileList Objects
var ireg = /image\/.*/i,
p = document.getElementById('Preview'); var ul = document.getElementById('Errors');
for(var i = 0, f; f = files[i]; i++) {
if(!f.type.match(ireg)) {
//设置错误信息
var li = document.createElement('li');
li.innerHTML = '<li>' + f.name +'不是图片文件.</li>'; ul.appendChild(li); continue;
} var reader = new FileReader(); reader.onload = (function(file) {
return function(e) {
var span = document.createElement('span');
var img = new Image;
img.alt=file.name;
img.onload = function() {
console.log(img.height); // image is loaded; sizes are available
}; img.src=this.result;
span.innerHTML = '<img class="thumb" src="'+ this.result +'" alt="'+ file.name +'" />'; p.insertBefore(span, null);
};
})(f);
//读取文件内容
reader.readAsDataURL(f);
}
} if(window.File && window.FileList && window.FileReader && window.Blob) {
document.getElementById('Files').addEventListener('change', fileSelect, false);
} else {
document.write('您的浏览器不支持File Api');
}
</script>
</body>
</html>

上传txt文件内容预览(需对<>&'"|等符号进行过滤否则会中断读取):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
img{vertical-align:bottom;}
</style>
</head>
<body>
<input type="file" multiple id="Files">
<div id="Preview"></div>
<ul id="Errors"></ul>
<script>
function encodeHTML(source) {
//return source;
return source
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\"/g, '"');
};
function fileSelect(e) {
e = e || window.event; var files = e.target.files; //FileList Objects
var ireg = /text\/.*/i,
p = document.getElementById('Preview'); var ul = document.getElementById('Errors');
for(var i = 0, f; f = files[i]; i++) {
console.log(f.type);
if(!f.type.match(ireg)) {
//设置错误信息
var li = document.createElement('li');
li.innerHTML = '<li>' + f.name +'不是文本文件.</li>'; ul.appendChild(li); continue;
} var reader = new FileReader(); reader.onload = (function(file) {
return function(e) {
var div = document.createElement('div');
div.className = "text"
div.innerHTML = encodeHTML(this.result); p.insertBefore(div, null);
};
})(f);
//读取文件内容
reader.readAsText(f);
}
} if(window.File && window.FileList && window.FileReader && window.Blob) {
document.getElementById('Files').addEventListener('change', fileSelect, false);
} else {
document.write('您的浏览器不支持File Api');
}
</script>
</body>
</html>

读取上传txt指定区域文本内容:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{margin:0;padding:0;}
img{vertical-align:bottom;}
</style>
</head>
<body>
<input type="file" multiple id="Files">
<button type="button" id="buttons" data-start="0" data-end="3">确定</button>
<div id="range"></div>
<div id="content"></div>
<script> function readBlob(start, end) {
var files = document.getElementById('Files').files; if(!files.length) {
alert('请选择文件');
return false;
} var file = files[0],
start = parseInt(start, 10) || 0,
end = parseInt(end, 10) || (file.size - 1); var r = document.getElementById('range'),
c = document.getElementById('content'); var reader = new FileReader(); reader.onloadend = function(e) {
if(this.readyState == FileReader.DONE) {
c.textContent = this.result;
r.textContent = "Read bytes: " + (start + 1) + " - " + (end + 1) + " of " + file.size + " bytes";
}
}; var blob; blob = file.slice(start, end + 1, 'text/plain;charset=UTF-8');
reader.readAsBinaryString(blob);
}; try {
document.getElementById('buttons').addEventListener('click', function(e) {
if(e.target.tagName.toLowerCase() == 'button') {
var start = e.target.getAttribute('data-start'),
end = e.target.getAttribute('data-end'); readBlob(start, end);
}
});
} catch(ex) {
alert('something error happens!')
}
</script>
</body>
</html>

File接口提供了slice方法支持把文件切成不同的片段,第一个参数是起始的字节数,第二个参数是结束的字节数,还有一个可选的内容类型字符串可以作为第三个参数。早期的chrome和firefox版本不支持file.slice   可使用file.webkitSlice和file.mozSlice替代,最新版本均支持file.slice。

6、文件读取进度

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<fieldset>
<legend>分度读取文件:</legend>
<input type="file" id="File" />
<input type="button" value="中断" id="Abort" />
<p>
<label>读取进度:</label><progress id="Progress" value="0" max="100"></progress>
</p>
<p id="Status"></p>
</fieldset>
</form> <script>
var h = {
init: function() {
var me = this; document.getElementById('File').onchange = me.fileHandler;
document.getElementById('Abort').onclick = me.abortHandler; me.status = document.getElementById('Status');
me.progress = document.getElementById('Progress');
me.percent = document.getElementById('Percent'); me.loaded = 0;
//每次读取1M
me.step = 1024 * 1024;
me.times = 0;
},
fileHandler: function(e) {
var me = h; var file = me.file = this.files[0];
var reader = me.reader = new FileReader(); //
me.total = file.size; reader.onloadstart = me.onLoadStart;
reader.onprogress = me.onProgress;
reader.onabort = me.onAbort;
reader.onerror = me.onerror;
reader.onload = me.onLoad;
reader.onloadend = me.onLoadEnd;
//读取第一块
me.readBlob(file, 0);
},
onLoadStart: function() {
var me = h;
},
onProgress: function(e) {
var me = h; me.loaded += e.loaded;
//更新进度条
me.progress.value = (me.loaded / me.total) * 100;
},
onAbort: function() {
var me = h;
},
onError: function() {
var me = h; },
onLoad: function() {
var me = h; if(me.loaded < me.total) {
me.readBlob(me.loaded);
} else {
me.loaded = me.total;
}
},
onLoadEnd: function() {
var me = h; },
readBlob: function(start) {
var me = h; var blob,
file = me.file; me.times += 1; if(file.slice) {
blob = file.slice(start, start + me.step + 1);
} else if(file.mozSlice) {
blob = file.mozSlice(start, start + me.step + 1);
} me.reader.readAsText(blob);
},
abortHandler: function() {
var me = h; if(me.reader) {
me.reader.abort();
}
}
}; h.init();
</script>
</body>
</html>

参考资料:

http://blog.csdn.net/zhu1988renhui/article/details/7936498
http://blog.csdn.net/zhu1988renhui/article/details/7936525
http://dev.w3.org/2006/webapi/FileAPI/#dfn-filereader
http://www.html5rocks.com/zh/tutorials/file/dndfiles/
http://www.w3.org/TR/file-upload/
http://www.w3.org/TR/file-upload/#dfn-filereader
http://www.w3.org/TR/file-upload/#dfn-Blob
http://www.w3.org/TR/file-upload/#dfn-fileerror
http://www.w3.org/TR/progress-events/#Progress
http://www.zhangxinxu.com/wordpress/?p=1923
http://www.tfan.org/wp-content/slides/file.html#1
 
本文代码以chrome测试为主。

[转]html5表单上传控件Files API的更多相关文章

  1. html5表单上传控件Files筛选指定格式的文件:accept属性过滤excel文件

    摘自:http://blog.csdn.net/jyy_12/article/details/9851349 (IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允 ...

  2. 淘宝&lpar;阿里百川&rpar;手机客户端开发日记第十四篇 jsp提交含有上传控件表单乱码问题

    今天我来总结昨天开发的一个简单的jsp web 应用程序时,在做一个调教表单,从servlet端获取数据,这个表单里含有上传文件控件.如果我们在测试的时候,获取数据的是乱码,这时,大家可以先去掉上传控 ...

  3. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  4. 一般处理程序上传文件(html表单上传、aspx页面上传)

    html 表单上传文件        一般处理程序由于没有 apsx 页面的整个模型和控件的创建周期,而比较有效率.这里写一个用 html 表单进行文件上传的示例.        1. 表单元素选用 ...

  5. 使用Uploadify&lpar;UploadiFive&rpar;多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

  6. FireFox下上传控件的显示问题

    Chrome正常 FireFox显示不正常 上传控件一直有个问题,就是样式问题,解决方法就是用一个大的背景层挡住,然后点大的背景层去触发上传控件的Click事件. Html: <span id= ...

  7. 深入浅出ExtJS 第四章 表单与输入控件

    4.1 制作表单 var form = new Ext.form.FormPanel({ title:'form', defaultType:'textfield', buttonAlign:'cen ...

  8. 通过winForm控制webForm的上传控件file的值

    文件上传是日常开发中经常遇到的,文件上传用的最多的当然是上传控件file了,一个form表单,其中有一点就是form表单的enctype属性设置为multipart/form-data,呵呵,这个在所 ...

  9. SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)

    做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...

随机推荐

  1. C&plus;&plus;虚函数浅探

    C++中和虚函数(Virtual Function)密切相关的概念是"动态绑定"(Dynamic Binding),与之相对的概念是"静态绑定"(Static ...

  2. 移动开发平台-应用之星app制作教程

    目前在AppStore.GooglePlay等应用商店里已经有以百万计的Apps,应用程序使移动互联网空间得以无限拓展.很多人梦想着AngryBirds式的奇迹在自己身上发生,他们渴望自己开发的应用程 ...

  3. linux 常用命令集锦

    喝断片儿了,我是谁?我在什么地方?我做过些什么事?查看当前用户 who am i查看当前路径 pwd查看历史记录 history 我忘了程序放哪了,就记得个名.更新系统数据库 updatedb查找文件 ...

  4. 201621123002《java程序设计》第九周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 //功能需求:将所有大于5的生成一个新的List对象 List lis ...

  5. Kickstart Practice Round 2017---A

    Problem The Constitution of a certain country states that the leader is the person with the name con ...

  6. Confluence 6 查看一个任务的执行历史

    希望查看一个计划任务最后运行的时间和这个计划任务最后一次运行花费了多长时间.单击计划任务边上的 历史(History )连接. 如果一个计划任务从来没有运行的胡啊,那么这个历史的链接是不会显示的. 屏 ...

  7. 《剑指offer》 包含min函数的栈

    本题来自<剑指offer> 包含min函数的栈 题目: 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 思路: 举例子让抽象问题具体 ...

  8. 认识bash和shell

    各个 shell 的功能都差不多, Linux 默认使用 bash ,所以我们主要学习bash的使用. 1.bash命令格式 命令 [-options] [参数],如:tar  zxvf  demo. ...

  9. 【Postgresql】use

    http://www.jianshu.com/p/0ed65e630fd0 http://www.linuxidc.com/Linux/2013-12/94354.htm tag 是一个Array字段 ...

  10. 【第三十二章】 elk(3)- broker架构 &plus; 引入logback

    实际中最好用的日志框架是logback,我们现在会直接使用logback通过tcp协议向logstash-shipper输入日志数据.在上一节的基础上修改!!! 一.代码 1.pom.xml 1 &l ...