文件对象，这词儿听上去挺牛逼的吧?其实，它就是个放文件资料的小箱子，比如文件名啊、体积啊、种类什么的都能找到。那FileList？简单来说就是堆放众多这种小箱子的大本营。设想一下，你在文件夹里挑了一堆文件，这时候FileList就能帮助你记住这些东西！
其实，这些文件在本质上都是从Blob那衍化来的。Blob这个名字，第一次听到可能会觉得有点儿奇怪？不过别担心，它其实就是负责存储和处理各种类型的二进制数据，比如我们常见的图片、视频等等。而且，Blob还有一个超级实用的功能——slice，它能让你轻松地获取到数据中的任意片段，简直太方便了！
FileReader：文件的内存之旅
说起FileReader，这就是个牛气冲天的人物！它就是文本进入你笔记本电脑内存的一位导游，专门负责用正确的方法把它们给带上路。当然，在这个路程当中，FileReader还会触发一些关键的点，比如onerror（出故障时）、onprogress（进行中的时候）和onload（顺利完成时）。这些就像是你在路上看到的指示牌，告诉你现在走到哪里了，是不是遇到了什么问题。
特别棒的事就是，当你成功读完资料以后，只需要用e.target.result或者this.result就能轻松得拿到内容了！相当于你到达了目的地，导游直接把地图塞到你手里，告诉你接下来该往哪儿走。
拖放属性：你的文件，你做主
接下来，咱们说说拖放这个功能。它好像给你一种特异功能，能随意把文件拖来拖去。实现这个小技巧，首先得把你想要拖拽的元素的dragable属性设成真的。像img元素和a元素，它们本来就能被拖动。
可不能忘target里的dragover和drop动作要防止默认效果噢～就像是告诉浏览器说“这儿只有我能扔东西！”这样我们的拖拽才会好用~
DataTransfer对象：拖放的小助手
这个叫DataTransfer的家伙，高大上？它是你拖放数据时的得力帮手。它能从外面拖过来的文件里找信息，比如啥种类的文件；而且还能控制每次拖曳显示什么图片！
比如，你能用setData()给行李贴个标签。至于setDragImage()，它能让你挑个图片当拖拽时的小图标，感觉还挺有意思的！
实战演练：拖拽上传图片预览
好好好，理论科普完了，咱们直接上手！比如说，你想搞个拖拽上传图的功能先。那就得把目标元素的四个大事儿弄清楚：ondragstart、ondragover、ondrop和ondragend。这几个里头，特别得留意的就是ondragover和ondrop，别忘了防备它们的默认反应。
搞定之后，你可以用e.dataTransfer.files来找找这个存放文件的地方。然后，顺手就把它们全拿出来，看看每一个文件都是什么类型、多大。只要找到你想要的那种，那就没什么问题！
下一步，我们要用FileReader这个东西来看文件里都有啥。用readAsDataURL(文件对象)这个方法就能搞定，读完之后，onload事件就会发生，这时候你就可以用this.result来拿到读出来的数据。
记得在FileReader那儿加上点儿有意思的算法处理！顺便说下，这样就能做出个基本能用的拖动上传图片预览小程序。
总结与展望
请将图片文件拖拽至此区域！
看完这篇文章，咱们就搞定了文件拖拽和上传的全套流程！从文件对象开始，然后是FileList，再来就是FileReader和DataTransfer。每个环节都很关键哦～希望这些小知识能帮到你们玩转这些高大上的技术！
最后，问你个问题哈：你感觉咱们这个拖拽上传小功能在你那项目里有用不？你在这儿给大家分享下看法呗，还得给个赞和分享！
$(function() {
/*思路：
*1.熟悉文件拖拽 目标元素 的四个事件,注意:ondragover、ondrop事件中阻止默认行为
*2.拖拽放置后，获取到文件对象集合：e.dataTransfer.files
*3.循环该集合中的每个文件对象，判断文件类型以及文件大小，是指定类型则进行相应的操作
*4.读取文件信息对象：new FileReader()，它有读取文件对象为DataUrl等方法：readAsDataURL(文件对象)、读取成功之后触发的事件：onload事件等，this.result为读取到的数据
*5.在FileReader对象中的几个事件中进行相应的逻辑处理
*
*/
//必须将jq对象转换为js对象，调用原生方法
var oDiv = $(".container").get(0);
var oP = $(".text");
//进入
oDiv.ondragenter = function() {
oP.html('');
}
//移动，需要阻止默认行为，否则直接在本页面中显示文件
oDiv.ondragover = function(e) {
e.preventDefault();
}
//离开
oDiv.onleave = function() {
oP.html('请将图片文件拖拽至此区域！');
}
//拖拽放置，也需要阻止默认行为
oDiv.ondrop = function(e) {
e.preventDefault();
//获取拖拽过来的对象,文件对象集合
var fs = e.dataTransfer.files;
//若为表单域中的file标签选中的文件，则使用form[表单name].files[0]来获取文件对象集合
//打印长度
console.log(fs.length);
//循环多文件拖拽上传
for (var i = 0; i < fs.length; i++) {
//文件类型
var _type = fs[i].type;
console.log(_type);
//判断文件类型
if (_type.indexOf('image') != -1) {
//文件大小控制
console.log(fs[i].size);
//读取文件对象
var reader = new FileReader();
//读为DataUrl,无返回值
reader.readAsDataURL(fs[i]);
reader.onloadstart = function(e) {
//开始加载
}
// 这个事件在读取进行中定时触发
reader.onprogress = function(e) {
$("#total").html(e.total);
}
//当读取成功时触发，this.result为读取的文件数据
reader.onload = function() {
//文件数据
// console.log(this.result);
//添加文件预览
var oImg = $("");
oImg.attr("src", this.result);
$(oDiv).append(oImg); //oDiv转换为js对象调用方法
}
//无论成功与否都会触发
reader.onloadend = function() {
if (reader.error) {
console.log(reader.error);
} else {
//上传没有错误，ajax发送文件，上传二进制文件
}
}
} else {
alert('请上传图片文件！');
}
}
}
});
评论0