HTML5的文件操作与拖放操作

file对象和FileList对象

在HTML 5中，为input元素添加multiple属性，file元素允许一次选择多个文件，用户选择的每一个文件都是一个file对象，而FileList对象则是这些file对象的列表，代表用户选择的所有文件，是file对象的集合。

1. 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对象

1. ArrayBuffer和ArrayBufferView概念

ArrayBuffer实际上是JavaScript操作二进制数据的一个接口，它的作用是分配一段可以存放数据的连续内存区域。一个ArrayBuffer对象代表一个固定长度的用于装载数据的缓存区。

在HTML 5中，不能直接操作ArrayBuffer对象中的内容，需要ArrayBufferView对象来读写。

ArrayBufferView对象可以将缓存区中的数据转换为各种数据类型的数组。

2. ArrayBuffer对象

ArrayBuffer对象代表一个存储固定长度的二进制数据的缓冲存区。不能直接存取ArrayBuffer缓存区中的内容，必须通过ArrayBufferView对象来读写ArrayBuffer缓存区中的内容。

扫描二维码关注公众号，回复： 9400796 查看本文章

在HTML 5中，使用ArrayBuffer的构造方法可以创建ArrayBuffer对象。

var arrayBuffer = new ArrayBuffer(length);

3. 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>