file对象和FileList对象
在HTML 5中，为input元素添加multiple属性，file元素允许一次选择多个文件，用户选择的每一个文件都是一个file对象，而FileList对象则是这些file对象的列表，代表用户选择的所有文件，是file对象的集合。
- file对象
在页面中指定input元素的type属性为file，可以实现文件的选择功能。选择得到的文件即是file对象，它有两个属性.
name属性表示文件名，不包括路径； lastModifiedDate属性表示文件的最后修改日期。
<script>
function ShowFileInfo(){
var fileInput=document.getElementById("fileload");
var file=fileInput.files[0];
document.getElementById("show").innerHTML="文件名"+file.name+"|"+file.lastModifiedDate;
}
</script><h3>选择文件</h3>
<br></br>
<input type="file" id="fileload" multiple="3"/>
<br></br>
<input type="button" value="显示信息" onclick="ShowFileInfo();"/>
<hr />
<p id="show"></p>
2. FileList对象
input元素的multiple属性就用于选择多个文件，这些文件实际上保存在一个file数组中，也就是FileList对象，表示用户选择的文件列表，其中的每个元素都是一个file对象。
<script>
function ShowFileInfo(){
var result="";
var fileInput=document.getElementById("fileload");
for(var i=0;i<fileInput.files.length;i++){
result+="文件名"+fileInput.files[i].name+"<br/>";
document.getElementById("show").innerHTML=result;
}
}
</script><h3>选择文件</h3>
<br></br>
<input type="file" id="fileload" multiple="3"/>
<br></br>
<input type="button" value="显示文件列表" onclick="ShowFileInfo();"/>
<hr />
<p id="show"></p>
ArrayBuffer对象与ArrayBufferView对象
- ArrayBuffer和ArrayBufferView概念
ArrayBuffer实际上是JavaScript操作二进制数据的一个接口，它的作用是分配一段可以存放数据的连续内存区域。一个ArrayBuffer对象代表一个固定长度的用于装载数据的缓存区。
在HTML 5中，不能直接操作ArrayBuffer对象中的内容，需要ArrayBufferView对象来读写。
ArrayBufferView对象可以将缓存区中的数据转换为各种数据类型的数组。
- ArrayBuffer对象
ArrayBuffer对象代表一个存储固定长度的二进制数据的缓冲存区。不能直接存取ArrayBuffer缓存区中的内容，必须通过ArrayBufferView对象来读写ArrayBuffer缓存区中的内容。
在HTML 5中，使用ArrayBuffer的构造方法可以创建ArrayBuffer对象。
var arrayBuffer = new ArrayBuffer(length);- ArrayBufferView对象
(1)ArrayBufferView对象概述
由于ArrayBuffer对象不提供任何直接读写内存的方法，而ArrayBufferView对象实际上是建立在ArrayBuffer对象基础上的视图，它指定了原始二进制数据的基本处理单元，通过ArrayBufferView对象来读取ArrayBuffer对象的内容。
ArrayBuffer对象存储的视图
(2)ArrayBufferView对象的生成
ArrayBufferView对象的每一个子类均有多种方法可以生成。
在ArrayBuffer对象之上生成视图
// 创建一个8字节的ArrayBuffer
var b = new ArrayBuffer(8);// 创建一个指向b的Int32视图，开始于字节0，直到缓冲区的末尾
var v1 = new Int32Array(b);// 创建一个指向b的Uint8视图，开始于字节2，直到缓冲区的末尾
var v2 = new Uint8Array(b, 2);// 创建一个指向b的Int16视图，开始于字节2，长度为2
var v3 = new Int16Array(b, 2, 2);直接生成
var f64a = new Float64Array(8);
f64a[0] = 10;
f64a[1] = 20;
f64a[2] = f64a[0] + f64a[1];将普通数组转为视图数组
将一个数据类型符合要求的普通数组，传入构造方法，也能直接生成视图，视图可以由一个类型化数组引用。
var typedArray = new Uint8Array( [ 1, 2,3, 4 ] );(3)ArrayBufferView对象的操作
数组操作
var buffer = new ArrayBuffer(16);
var int32View = new Int32Array(buffer);
for (var i=0; i<int32View.length;i++) {
int32View[i] = i*2;
}buffer属性的使用
var a = new Float32Array(64);
var b = new Uint8Array(a.buffer);byteLength属性和byteOffset属性的使用
var b = new ArrayBuffer(8);
// v1.byteLength=8, v1.byteOffset=0
var v1 = new Int32Array(b);
//v2.byteLength =6, v2.byteOffset=2
var v2 = new Uint8Array(b, 2);
// v3.byteLength=4, v3.byteOffset= 2
var v3 = new Int16Array(b, 2, 2);(4 )DataView对象
DataView视图提供更多操作选项，而且支持设定字节序。从设计目的而言，ArrayBuffer对象的各种类型化视图，是用来向网卡、声卡之类的本机设备传送数据，所以使用本机的字节序就可以了；
而DataView的设计目的，是用来处理网络设备传来的数据，所以大端字节序或小端字节序是可以自行设定的。
DataView对象的生成
DataView本身也是构造方法，接受一个ArrayBuffer对象作为参数，生成视图，构造DataView对象的语法格式如下。
DataView(ArrayBuffer buffer [, start [,length]]);下面是一个构造DataView对象的示例。
var buffer = new ArrayBuffer(24);
var dv = new DataView(buffer);DataView对象读取内存的方法
DataView视图读取内存的方法
DataView视图写内存的方法
Blob对象
使用Blob对象获取文件大小和类型
Blob表示二进制原始数据，Blob对象有两个属性，size属性表示一个Blob对象的字节长度，type属性表示Blob对象的MIME类型，如果是未知类型，则返回空字符串。
例子
<script>
function ShowFileInfo(){
var file;
file=document.getElementById("file").files[0];
var name=document.getElementById("name");
var size=document.getElementById("size");
var type=document.getElementById("type");
name.innerHTML=file.name;
size.innerHTML=file.size;
type.innerHTML=file.type;
}
</script><h3>选择文件</h3>
<br></br>
<input type="file" id="file" name="file"/>
<br></br>
<input type="button" value="显示文件信息" onclick="ShowFileInfo();"/>
<hr />
文件名字：<span id="name"></span><br/>
文件长度：<span id="size"></span><br/>
文件类型：<span id="type"></span><br/>
例子
<script>
function ShowFileInfo(){
var file;
for(var i=0;i<document.getElementById("file").files.length;i++){
file=document.getElementById("file").files[i];
if(!/image\/\w+/.test(file.type)){
alert(file.name+"不是图形文件");
}else{
alert(file.name+"已上传");
}
}
}
</script><h3>选择文件</h3>
<br></br>
<input type="file" id="file" name="file" multiple="multiple"/>
<br></br>
<input type="button" value="文件上传" onclick="ShowFileInfo();"/>
<hr />
1．size属性
表示Blob对象的字节长度。
2．type属性
表示Blob对象的MIME类型，如果是未知类型，则返回一个空字符串。
3．通过accept属性过滤选择的文件
在选择文件上传后，如果能根据文件返回的类型过滤所选择的文件，也是一种可行的方法，在HTML 5中，可以通过为file类型的input元素添加accept属性来指定要过滤的文件类型。
在设置完accept属性之后，在浏览器中选择文件时会自动筛选符合条件的文件。例如，选择图像文件的语法格式如下。
<input type="file" id="file" multiple accept="image/jpeg"/><input type="file" accept="image/*" />解决中accept=”image/*”反应慢的问题
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">通过slice方法分割文件
Blob对象有一个方法slice()，用于将Blob对象分割为更小的二进制Blob对象。File对象是继承Blob对象的，因此File对象也含有slice方法。
// 获取一个上传的文件，并通过slice方法分割
var file =document.getElementById('file').files[0];
var file1 =file.slice(startByte,endByte);例子
<script>
function readBlob(){
var file=document.getElementById("file").files[0];
if(file){
//
var fileChunkFromEnd=file.slice(-Math.round(file.size/2));
var size=document.getElementById("middlesize");
middlesize.innerHTML=fileChunkFromEnd.size;
//
var fileChunkFromStart=file.slice(0,Math.round(file.size/2));
var size=document.getElementById("startsize");
startsize.innerHTML=fileChunkFromStart.size;
//
var fileNoMetadata=file.slice(0,-100,"application/experimental");
var size=document.getElementById("partsize");
partsize.innerHTML=fileNoMetadata.size;
}
}
</script><h3>选择文件</h3>
<br></br>
<input type="file" id="file" name="file" multiple="multiple"/>
<br></br>
<input type="button" value="分割文件" onclick="readBlob();"/>
<p>中间开始文件长度：<span id="middlesize"></span></p>
<p>从头开始文件长度：<span id="startsize"></span></p>
<p>1-100文件长度：<span id="partsize"></span></p>
<hr />
FileReader接口
FileReader接口的方法
FileReader接口的事件
FileReader接口的应用
<script>
var result=document.getElementById("result");
var file=document.getElementById("file");
function readImg(){
var file=document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
var result=document.getElementById("result");
result.innerHTML='<img src="'+this.result+'"alt="" />';
}
}
function readString(){
var file=document.getElementById("file");
var reader=new FileReader();
reader.readAsBinaryString(file);
reader.onload=function(f){
var result=document.getElementById("result");
result.innerHTML=this.result;
}
}
function readText(){
var file=document.getElementById("file").files[0];
var reader=new FileReader();
reader.readAsText(file);
reader.onload=function(f){
var result=document.getElementById("result");
result.innerHTML=this.result;
}
}
</script><h3>选择文件</h3>
<br></br>
<input type="file" id="file"/>
<input type="button" value="读取图像" onclick="readImg();"/>
<input type="button" value="读取二进制数据" onclick="readString();"/>
<input type="button" value="读取文本文件" onclick="readText();"/>
<div id="result" name="result"></div>
FileReader接口的事件处理应用
<script>
function showImg(){
var file=document.getElementById("file").files[0];
var reader=new FileReader();
var result=document.getElementById("result");
reader.onload=function(e){
result.innerHTML='<img src="'+this.result+'" alt=""/>';
alert("load");
};
reader.onprogress=function(e){
alert("progress");
};
reader.onabort=function(e){
alert("abort");
};
reader.onerror=function(e){
alert("error");
};
reader.onloadstart=function(e){
alert("loadstart");
};
reader.onloadend=function(e){
alert("loadend");
};
reader.readAsDataURL(file);
}
</script><p>
<label for="">请选择一个图像文件：</label>
<input type="file" id="file"/>
<input type="button" value="显示图片" onclick="showImg();" />
</p>
<div id="result" name="result"> </div>
拖放API
拖放API简介
draggable属性
HTML5为所有的HTML元素都提供了一个draggable属性，用于指定一个元素是否可以被拖放。draggable有以下3种取值。
- true：表示此元素可拖放。
- false：表示此元素不可拖放。
- auto：除img和带href的标记a标记表示可拖放外，其它标记均不可拖放。
拖放事件
拖放的实现过程
在HTML5中要想实现拖放操作，需要以下步骤。
（1）指定拖放源并设置元素为可拖放
为了使元素可拖动，把draggable属性设置为true。常见的元素有图片、文字、动画等。
（2）处理拖拽事件
编写dragstart、drag等事件的处理程序。
（3）指定放置位置并处理放置事件
将可拖放元素放到适合位置，实现该功能的事件是ondragover，默认情况下，无法将数据、元素放置到其他元素中。如果需要设置允许放置，用户必须阻止目标元素的默认处理方式。
（4）放置并处理拖拽结束事件
当放置被拖放元素时，就会发生drop事件、dragend事件等。
例子
<style type="text/css">
div#div1{
width: 500px;
height: 500px;
padding: 10px;
border: 1px solid brown;
}
</style><script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("text/plain",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("text/plain");
ev.target.appendChild(document.getElementById(data));
}
</script><p>请把图片拖放到矩形中</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event);"></div>
<br />
<img id="drag1" src="images/pp.png" draggable="true" ondragstart="drag(event)"/>
DataTransfer对象的属性与方法
DataTransfer对象的属性及拖放视觉效果
DataTransfer对象的属性
- 如果effectAllowed属性设定为none，则不允许拖放元素。
- 如果不dropEffect属性设定为none，则不允许被拖放到目标元素中。
- 如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉效果进行显示。
- 如果effectAllowed属性设定为具体效果（不为none、all），dropEffect属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中。
DataTransfer对象的方法
（1）setData(format, data)
该方法将指定类型的数据存入dataTransfer对象，参数format表示保存的数据类型，参数data表示数据内容。
下面代码使用setData()方法将数据e.target.id保存到dataTransfer对象。
src.ondragstart = function (e) { //开始拖放元素时触发
//使用 dataTransfer保存拖放元素ID
e.dataTransfer.setData("text",e.target.id);
msg.innerHTML="开始拖放："+draggedID;
}（2）getData(format)
该方法用于从dataTransfer对象中读取指定类型的数据信息，参数format表示读取的数据类型。
下面代码使用getData()方法从dataTransfer对象取得数据。
target.ondrop = function(ev){ //释放鼠标的时候触发
target.innerHTML=ev.dataTransfer.getData('text');
e.preventDefault();
}（3）clearData(format)
该方法用于从dataTransfer对象中移除指定类型的数据信息，参数format表示移除的数据类型。
（4）setDragImage(image,x,y)
该方法用于设置拖拽过程中鼠标指针显示的图标，当没有显示调用setDragImage()方法进行设置时，拖拽图标将使用默认样式。参数image用于设定拖拽图标的图像元素，x用于设定图标与鼠标指针在x轴方向的距离，y用于设定图标与鼠标指针在y轴方向的距离。
DataTransfer对象的方法
<style type="text/css">
span#source {
border: 1px #000000 solid;
}
div#div1 {
width: 150px;
height: 50px;
background: red;
margin: 50px;
}
</style><script>
window.onload = function() {
var src = document.getElementById("source");
var target = document.getElementById('div1');
src.ondragstart = function(ev) { //拖拽前触发
this.style.background = 'yellow';
ev.dataTransfer.setData('text', ev.target.id); //存储一个键值对：value值必须是字符串
ev.dataTransfer.effectAllowed = 'all';
ev.dataTransfer.setDragImage(this, 0, 0);
};
src.ondragend = function() { //拖拽结束触发
this.style.background = '';
};
target.ondragenter = function() { //相当于onmouseover
this.style.background = 'green';
};
target.ondragleave = function() { //相当于onmouseout
this.style.background = 'red';
};
target.ondragover = function(ev) { //进入目标、离开目标之间，连续触发
ev.preventDefault(); //阻止默认事件：元素就可以释放了
};
target.ondrop = function(ev) { //释放鼠标的时候触发
this.style.background = 'red';
target.innerHTML = ev.dataTransfer.getData('text')
};
};
</script><span id="source" draggable="true">请拖拽我</span>
<div id="div1">请拖拽到这里</div>
拖放的应用
拖动网页元素
<style type="text/css">
ul {
min-height: 100px;
background-color: #EEE;
margin: 20px;
width: 200px;
}
ul li {
background-color: #CCC;
padding: 10px;
margin-bottom: 10px;
list-style: none;
width: 160px;
}
</style><script>
window.onload = function() {
//获取目标元素和可能的被拖动元素
var target = document.querySelector('#drop-target');
var dragElements = document.querySelectorAll('#drag-elements li');
// 新建变量elementDragged，用来存放实际拖动的元素。
var elementDragged = null;
//对被拖动元素绑定dragstart事件和dragend事件
for(var i = 0; i < dragElements.length; i++) {
dragElements[i].addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text', this.innerHTML);
elementDragged = this;
});
dragElements[i].addEventListener('dragend', function(e) {
elementDragged = null;
});
}
//绑定目标元素的dragover事件
target.addEventListener('dragover', function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
return false;
});
//定义目标元素的drop事件，从原来的位置删除被拖动元素
target.addEventListener('drop', function(e) {
e.preventDefault();
e.stopPropagation();
this.innerHTML = '从拖动区到目标区的元素是： ' + e.dataTransfer.getData('text');
document.querySelector('#drag-elements').removeChild(elementDragged);
return false;
});
}
</script><h3>可拖动区域</h3>
<ul id="drag-elements">
<li draggable="true">猫猫</li>
<li draggable="true">狗狗</li>
<li draggable="true">兔子</li>
<li draggable="true">鹦鹉</li>
</ul>
<h3>目标区</h3>
<ul id="drop-target"></ul>
拖动上传图片
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.content {
margin: 5px auto;
width: 600px;
border: 1px solid #ccc;
padding: 20px;
}
.content .drag {
width: 596px;
min-height: 300px;
border: 2px dashed #666;
}
div#title {
min-height: 20px;
text-align: center;
margin-top: 10px;
}
span#spn-img img {
max-width: 596px;
}
</style><script>
function fileUploadPreview(aFile) {
var i;
//依次处理所有文件
for(i = 0; i < aFile.length; i++) {
var tmp = aFile[i];
//将文件以Data URL形式读入
var reader = new FileReader();
reader.onload = function(event) {
var txt = event.target.result;
var img = document.createElement("img");
img.src = txt;
document.getElementById("spn-img").appendChild(img);
};
reader.readAsDataURL(tmp);
}
}
//定义目标元素的drop事件，展示拖动内容
function dropFile(e) {
fileUploadPreview(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}
</script><div class="content">
<form>
<div class="drag" ondrop="dropFile(event)" ondragenter="return false" ondragover="return false">
<span id="spn-img" id="spn-img"></span>
</div>
</form>
</div>
<div id="title">
请从文件夹中拖放图片到虚线框内！
</div>
