拖拽异步上传实现,拖拽上传前传

新增属性

在HTML5到来之前,绝大多数情况下使用file控件,我们前端工程师需要的有用信息都只能通过value属性获得的文件名字符串来获取(比如:文件类型、文件的直接名称等),这个很不方便,多文件上传的时候就更加麻烦了。另外,我们想不通过其他手段获取上传文件的大小更是一种奢望。

不过,好在这一切并没有那么糟,随着HTML5的到来,file控件上新增了files属性。该属性包括了file控件选择的文件对象集合,每个文件对象包含了当前文件的基本信息(类型、名称、大小)等,这样一来我们再也不用使用正则啊,字符串拆分啊,等等麻烦的方法去获取我们想要的信息了。下面我们在Chrome的控制台看下files属性的结构。我的测试方法是这样的:

首先,使用Chrome浏览器随便打开一个网页,然后F12调出开发工具,接着在Console中输入:

JavaScript

document.body.innerHTML = ‘<input type=”file” id=”J_File”>’; var
f = document.getElementById(‘J_File’); f.onchange = function() {
console.log(this.files); };

1
2
3
4
5
document.body.innerHTML = ‘<input type="file" id="J_File">’;
var f = document.getElementById(‘J_File’);
f.onchange = function() {
    console.log(this.files);
};

这时页面会被替换成一个file控件,点击选择一个或多个(多个需要在input标签上增加multiple属性)本地文件,这时change事件将会被触发,控制台将会输出一下数据:

图片 1

显而易见,files属性的值是一个FileList类型的对象,它和数组类似,同样拥有length属性,而且我们也可以直接使用循环去获取每一个文件(File)对象(例:取第一个文件就是files[0])。我们继续看每个文件对象中包含的信息,我们常用的name、size、type等应有尽有了,突然感觉好高大上。

然而,我要告诉大家的是,我们也不能肆无忌惮的使用file控件的files属性,因为它在IE9及以下版本的IE浏览器中是不存在的,我们需要使用其他的手段(flash等)来弥补这个问题,这里就不展开了。

一个神奇的方法sendAsBinary

前面我们聊到的使用FormData来实现文件异步上传,在高级浏览器中都能正常运作,没有太大问题。接下来我们另外一个在Firefox实现异步上传的方法。这个方法,我们又会交到一个新的朋友——FireReader。FileReader是HTML5新增的一个对象,它可以访问用户本地文件,并且可以以不同格式读取文件内容。

file控件的地位受到威胁

随着files属性的出现,file控件的地位显然得到了很好的提升,但是这并不表示它的地位更加稳固。随着HTML5二来的,并不只有file控件的files属性。我们已经可以在越来越多的网站上可以看到拖拽上传这个一个新颖并且更符合用户行为的交互效果。这里我先不说拖拽上传功能的实现,我们先一起来看看另一种获取FileList对象的方法。

首先,我们需要一个拖拽上传的静态界面,细节不多说,直接上代码:

XHTML

<style> * {margin: 0;padding: 0;} .up-area {margin: 50px
auto;border: 1px dashed #ccc;background-color: #eee;width:
600px;height: 400px;line-height: 400px;text-align: center;color:
#666;cursor: pointer;} .up-area:hover {background-color: #ddd;}
</style> <input type=”file” name=”” id=”J_UploadFile”
style=”display: none;”> <div class=”up-area”
id=”J_UploadArea”> 点击此处或拖入文件进行上传 </div>
<script> (function(){ var area =
document.getElementById(“J_UploadArea”), file =
document.getElementById(“J_UploadFile”); function uploadFile(fs) {
console.log(fs); } area.onclick = function() { console.log(‘click’);
file.click(); }; file.onchange = function() { uploadFile(this.files); };
area.ondragenter = function(ev) { this.className = ‘up-area hover’;
ev.preventDefault(); }; area.ondragover = function(ev) {
ev.preventDefault(); }; area.ondrop = function(ev) {
ev.preventDefault(); console.log(‘drop’); var dt = ev.dataTransfer;
this.className = ‘up-area’; uploadFile(dt.files); }; })();
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style>
    * {margin: 0;padding: 0;}
    .up-area {margin: 50px auto;border: 1px dashed #ccc;background-color: #eee;width: 600px;height: 400px;line-height: 400px;text-align: center;color: #666;cursor: pointer;}
    .up-area:hover {background-color: #ddd;}
</style>
<input type="file" name="" id="J_UploadFile" style="display: none;">
<div class="up-area" id="J_UploadArea">
    点击此处或拖入文件进行上传
</div>
<script>
(function(){
    var area = document.getElementById("J_UploadArea"),
        file = document.getElementById("J_UploadFile");
    function uploadFile(fs) {
        console.log(fs);
    }
    area.onclick = function() {
        console.log(‘click’);
        file.click();
    };
    file.onchange = function() {
        uploadFile(this.files);
    };
    area.ondragenter = function(ev) {
        this.className = ‘up-area hover’;
        ev.preventDefault();
    };
    area.ondragover = function(ev) {
        ev.preventDefault();
    };
    area.ondrop = function(ev) {
        ev.preventDefault();
        console.log(‘drop’);
        var dt = ev.dataTransfer;
        this.className = ‘up-area’;
        uploadFile(dt.files);
    };
})();
</script>

在线Demo。将文件拖入灰色区域释放便可以在页面上看到文件信息。

细心的朋友可能已经发现了,其实我们这里又提供了优化file控件的另外一种方式——完全使用另一个标签替代,在该标签的click事件中主动触发file控件的click事件,正如上面代码中的: file.click() 。但是,这不是本文的重点。

我们仔细看上面代码中的最后一段,即ondrop的事件处理函数,我们的files对象并不是来自file控件,而是一个叫dataTransfer的东西。那么我们是不是可以大胆的猜测,拖拽上传功能其实可以完全抛开file控件独立完成?这里先留个悬念,我们以后再讨论。

在上面的案例中我们通过点击来选择文件从而获取FileList对象,和通过将文件拖拽到灰色区域来获取FileList对象,这两种方式虽不同,但我们得到的数据确是一样的,这足以说明file控件不再独裁,它的地位已经渐渐开始受到威胁。

1 赞 1 收藏
评论

图片 2

方法

  • abort :中断文件读取操作
  • readAsBinaryString :将文件内容读取为二进制格式
  • readAsDataURL :将文件内容读取为DataURL格式,通常所说的base64格式
  • readAsText :将文件内容读取为文本

以上就是FileReader对象最常用的内容,下面我们先看一个小例子:

JavaScript

var rd = new FileReader(); rd.onload = function(ev) {
console.log(ev.target.result); }; rd.readAsText(file);

1
2
3
4
5
var rd = new FileReader();
rd.onload = function(ev) {
    console.log(ev.target.result);
};
rd.readAsText(file);

以上代码中的file参数是一个file对象,可以使File控件的files属性中FileList的一个,也可以是dataTransfer中files属性中FileList的一个。

File杂谈——拖拽上传前传

2015/07/24 · HTML5 ·
拖拽上传

原文出处: 百码山庄   

在《File杂谈——初识file控件》一文中,我们已经对file控件有了初步的了解,并且对制作一个视觉和体验一致的file控件做了较为详细的说明,今天我们继续了解file控件的更多特性,并延伸出更多。

示例说明

点击区域选择文件或直接将文件拖入区域,触发文件上传功能,文件将异步发送到服务器。待服务端处理完成后返回基本信息,在页面中显示。由于服务器容量问题,本示例未做文件保存处理,只是简单的将文件基本信息返回,文件上传的后端具体处理逻辑需要自行补充。

File杂谈——拖拽异步上传实现

2015/07/25 · HTML5 ·
异步上传

原文出处: 百码山庄   

在前一篇文章《File杂谈——拖拽上传前传》中我制作了一个静态的拖拽上传界面,拖拽文件到显示区域释放,可以显示拖入文件的基本信息。本文将在此基础上进一步加工,打造一个完整的拖拽上传示例。

属性

  • result :读取到的文件内容,当读取操作完成后生效
  • readyState :FileReader对象的当前状态
  • error :出错时的错误信息

发表评论

电子邮件地址不会被公开。 必填项已用*标注