html5拖拽图片批量ajax无刷新进度上传

破晓 · 发表于 2016-7-28 16:36:52

1、前端拖拽图片

之前有篇文章说到HTML5的拖拽（drag、drop，详见：/post/jquery-plugin-1-jquery-drag-and-html5-draggable-api-and-compatibility.html）。这里说的拖拽图片只是弱化了拖的概念，而强化了拽的操作。从浏览器外部拖动一个文件到浏览器中来，如：

拖动文件到浏览器之后，就会打开浏览器支持的文件，如常用的txt、图片等，如下：

操作如上常用文件，一般都有默认行为来处理这样的事件。这里说的拖拽上传也是一个道理，就是要做的是从浏览器外部拖动文件到浏览器中来，并且在当前页面上传该文件。在表面上看来，这个方法很适合用户体验，但实际情况是用户体验急剧下降。因为大多数人浏览网页的时候是全最大化窗口查看的，而如果要拖拽上传文件的话，那么就需要把浏览器窗口后，非常的麻烦。就比如wordpress的添加媒体功能，也是支持拖拽上传图片的，可用过的人又有多少呢？

倒还不如点击选择图片操作来的更加快捷，不过本文旨在说明问题。也许有更好玩的例子没有被发现而已，在此只做抛砖引玉。

1.1、拖拽文件的files对象

在拖拽文件到浏览器，我们需要处理这些文件。

Js代码  
$.fn.listen=function(type,fn){  
    returnthis.each(function(){  
        $(this)[0].addEventListener(type,function(e){  
            if(!fn.call($(this),e)){  
                e.stopPropagation();  
                e.preventDefault();  
            }  
        },0);  
    });  
}  
$(document).bind("dragenter",function(){  
    returnfalse;  
}).bind("dragover",function(){  
    returnfalse;  
}).listen("drop",function(e){  
    // 这里处理拖拽进来的文件（们）  
});  

如上，可能细心的朋友发现了一些不同。那就是document使用了两个方法来绑定事件，dragenter、dragover使用jquery的bind方法绑定，而drop事件却使用自定义的listen方法绑定，这是为什么呢？因为jquery的事件绑定，为了兼容操作处理的事件的参数event，删减了一些属性使其在各个浏览器都保持一致。而此处用的是event的HTML5属性，恰巧是不兼容低级浏览器的，所以使用jquery的bind方法是无法获取的。我们可以来验证一下这个说法：

Js代码  
$(document).bind("dragenter",function(){  
    returnfalse;  
}).bind("dragover",function(){  
    returnfalse;  
}).bind("drop",function(e){  
    console.log(e);  
}).listen("drop",function(e){  
    console.log(e);  
});  

拖拽文件到这个页面，在浏览器控制台得到两个不尽相同的对象：

如图示黄色背景的dataTransfer是浏览器默认的event所独有的，而我们此处用的files对象这是在这里面。

Js代码  
console.log(e.dataTransfer.files);  

在浏览器控制台输出了：

由图示可知，该files对象是一个数组。值得注意的是，该files对象只读。可以接收到文件的基本信息（最后修改时间、文件名称、大小、类型），我们就可以在客户端来处理上传文件之前的操作。比如限制文件必须为图片格式、文件的大小不能超过100KB。

Js代码  
$(document).bind("dragenter",function(){  
    returnfalse;  
}).bind("dragover",function(){  
    returnfalse;  
}).listen("drop",function(e){  
    var files=e.dataTransfer.files;  
    var error='';  
    for(var i=0;i<files.length;i++){  
    console.log(files[i]);  
    if(files[i].size>1024*100)error+='第'+(i+1)+'个文件超过大小限制\n';  
    if(!/image/i.test(files[i].type))error+='第'+(i+1)+'个文件不是图片格式\n';  
}  
if(error)alert(error);  
});  

会弹出如下警告：

1.2、处理文件的FileReader对象

用户拖拽了符合我们预期的文件，我们就需要对其进行操作。比如本文要做的是用户必须上传100KB以内的图片类型文件。在获取到files对象之后，我们要使用FileReader对象来读取file的文件（该对象人如其名）。

Js代码  
$(document).bind("dragenter",function(){  
    returnfalse;  
}).bind("dragover",function(){  
    returnfalse;  
}).listen("drop",function(e){  
    var files=e.dataTransfer.files;  
    var error='';  
    for(var i=0;i<files.length;i++){  
    if(files[i].size>1024*100)error+='第'+(i+1)+'个文件超过大小限制\n';  
    if(!/image/i.test(files[i].type))error+='第'+(i+1)+'个文件不是图片格式\n';  
}  
// 有错误抛弃  
if(error){  
    alert(error);  
    return;  
}  
// 处理文件队列  
for(var i=0;i<files.length;i++){  
    read(files[i]);  
}  
});  
function read(file){  
    var reader=newFileReader();  
    reader.onload=function(e){  
        $("body").append('<img src="'+e.target.result+'" alt="" />');  
    }  
    reader.readAsDataURL(file);  
}  

在拖拽合适大小的图片文件到该页面之后：

FileReader对象是干嘛的呢？它可以读取文件，并进行相应的操作，涉及到安全问题，该操作不会对图片的源文件产生影响。该对象有如下属性和方法以及事件：

属性：为空
方法：
- about：中断文件读取
- readAsBinaryString:读取文件为二进制
- readAsDataURL：读取文件dataUrl（本例用到的）
- readAsText：读取文件为文本
事件：
- onabort：读取文件中断时触发
- onerror：读取文件出错时触发
- onload：读取文件成功时触发（本例用到的）
- onloadstart：读取文件开始时触发
- onprogress：读取文件中时一直触发
- onloadend：读取文件结束时触发（成功和失败都会触发，如jquery.ajax的complete）

在监听到文件读取成功时，该事件参数e有e.target.result指向的是读取的结果（即本例描述的文件的二进制url）。

1.3、处理表单的FormData对象

选到了合适大小的图片文件，我们就需要把这些文件无刷新上传到服务器，但我们如何发送这些图片到后端呢？传统的ajax方法一直是发送文本格式（Content-Type:application/x-www-form-urlencoded）而发送图片这些大文件需要用到浏览器的原生表单（Content-Type:multipart/form-data）。所幸的是，HTML5的支持的FromData属性可以帮忙完成这一个过程，即封装图片成表单数据以用于提交到后端。

FormData类似于jquery.serialize，jquery这一次又走在了前列。不过FormData比serialize要强大一点，它不仅可以在提交表单数据里增加纯文本也可以增加图片等二进制数据。其基本使用方法是：