js实现文件上传、文件预览、拖拽上传的方法

一、文件上传

1、上传的html

我们可以使用input实现文件上传

<input type="file" id="upload">

2、访问上传的文件

通过dom访问

const input = document.querySelector("#upload");
const files = input.files;

通过onchange事件访问

const input = document.querySelector("#upload");
input.addEventListener('change',function(){
	// 通过onchange事件获取files,函数要使用function定义,箭头函数this指向父级作用域
	const files = this.files;
},false);

input.addEventListener('change',(e) => {
	// 这个本质还是通过Dom获取文件
	const files = e.target.files;
},false);

3、自定义input

通常,我们在实际的开发中不会真的去使用input标签原本的样式,我们需要实现自己想要的按钮,或者其他的样式.这个时候,我们需要对input的样式进行定制.input上传,无非就是点击input的按钮=>弹出弹窗=>选择文件=>获取文件=>完成上传这么一个过程.如果我们自己写一个button,用自定义的button触发input就可以代替input进行上传文件了.所以我们可以隐藏input,用任意dom元素通过click代理input的点击事件.原理就说到这里.

const input = document.querySelector("#upload");
/* 通过调用input.click(),可以唤起文件选择弹窗,
*  所以你可以在button的点击事件里去调用这个方法,达到代理的目的
*/
input.click();

二、文件预览

方法1:通过FileReader实现

const input = document.querySelector("#upload");
input.addEventListener('change',function(){
	const files = this.files;
	const fileList = Object.entries(files).map(([_,file]) => {
		const reader = new FileReader();
		reader.readAsDataURL(file);
		reader.onload = (e) => {
			file.preview = e.target.result;
		}
		return file;
	});
	
	/* 
	*  file中的preview存的就是可以预览使用url,如果你需要保证fileList的顺序,
	*  请不要使用这种方式,你可以采用索引的方式存储,来保证它的顺序一致性
	*/
	console.log(fileList);
},false);

方法2:通过window.URL.createObjectURL()实现

const input = document.querySelector("#upload");
input.addEventListener('change',function(){
	const files = this.files;
	const fileList = Object.entries(files).map(([_,file]) => {
		const preview = window.URL.createObjectURL(file);
		file.preview = preview;
		// 需要在合适的实际进行销毁,否则只有在页面卸载的时候才会自动卸载.
		// window.URL.revokeObjectURL(preview);
		return file;
	});
	
	/* 
	*  file中的preview存的就是可以预览使用url
	*/
	console.log(fileList);
},false);

三、拖拽上传

// 此处定义一个drop容器(省略),并取到该元素;
const dropBox = document.querySelector("#drop");
dropBox.addEventListener("dragenter",dragEnter,false);
dropBox.addEventListener("dragover",dragOver,false);
dropBox.addEventListener("drop",drop,false);

function dragEnter(e){
	e.stopPropagation();
	e.preventDefault();
}

function dragOver(e){
	e.stopPropagation();
	e.preventDefault();
}

function drop(e){
	// 当文件拖拽到dropBox区域时,可以在该事件取到files
	const files = e.dataTransfer.files;
}