前端上传⽂件的⼏种⽅式
出于安全考量，操作系统分配给浏览器的权限较低，⽽单个⽹页所拥有对⽤户电脑操作的权限就更低了，这是为了防⽌因⽤户的操作不当导致恶意⽹页随意增删改动⽤户本地的⽂件，所以在前端⽹页中所有的⽂件操作必须全都由⽤户来主动操作触发⽂件上传。
⽤户触发⽂件上传操作的类型⼤致有以下⼏种常⽤⽅法
使⽤input标签，通过⼀个type设置为file的输⼊框可以选中本地⽂件
通过html5的拖拽⽅法进⾏⽂件上传
通过在编辑框进⾏⽂件复制
下⾯我们就对这⼏种不同的上传⽅法进⾏⼀个详细的分析，分析不同⽅法的⼀个特效和优劣
input上传
input上传
<form>
<input type="file" id="uploadfile" >
</form>
接着我们可以通过给这个input绑定⼀个change事件，当监测到该元素选中⽂件时我们就获取当前⼀个object对象并对其files的属性值进⾏操作，具体代码如下：
var file=document.querySelector("#uploadfile");
var object=this;
console.log(object.files);
for(var i=0;i<object.files.length;i++){
var url=ateObjectURL(object.files[i]);
}
}
此时在控制台中会输出⼀个filelist的对象，其中就包含当前选中的多个⽂件，我们通过这个对象进⾏属性访问即可获得我们需要的window.file的实例，我们可以通过对这个实例的type，size进⾏过滤选中我们需要的⽂件类型和⽂件⼤⼩。
我们接下来可以通过ateObjectURL这个⽅法获取⼀个window.file实例的路径从⽽获取该⽂件在⽤户电脑中的路径，这个路径的写法和我们常⽤的不同，它对前端开发⼈员也是透明的，不能够直接读取⾥⾯的内容但是计算机可以进⾏读取。它的地址指向的是⼀个blob的本地数据，这个数据可直接给页⾯上的img、video、audio等元素设置⼀个路径⽅便⽤户在前端页⾯上进⾏预览操作
H5拖拽
<div class="img-container">
将图⽚拖拽⾄此
</div>
他会在页⾯中显⽰⼀个框，然后我们可以监听他的拖拽事件
var file=document.querySelector(".img-container");
var iginalEvent.dataTransfer;
console.log(object.files);
for(var i=0;i<object.files.length;i++){
var url=ateObjectURL(object.files[i]);
}
inputtypefile不上传文件}
我们对这个拖拽事件的原始时间对象进⾏读取即可获得⼀个类filelist的对象，接下来的操作⽅法同上
⽂件粘贴
<div class="img-container"  contenteditable="true">
将图⽚粘贴⾄此
</div>
如果使⽤图⽚粘贴⽅法的话，咱们通常需要给这个⽬标div设置⼀个contenteditable为true的属性，因为默认情况下div元素皆是不可编辑的var file=document.querySelector(".img-container");
var iginalEvent.clipboardData;
console.log(object.files);
for(var i=0;i<object.files.length;i++){
var url=ateObjectURL(object.files[i]);
}
}
使⽤粘贴⽅法的话，此时待粘贴的数据全部藏在事件的.originalEvent.clipboardData属性值中，获取到的也是⼀个filelist，接下来的操作⽅法同上