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区域时,可以在该事件取到filesconst files = e.dataTransfer.files;
}

js实现文件上传、文件预览、拖拽上传的方法相关推荐

9行代码实现图片上传和预览(自定义按钮上传)
9行代码实现图片上传和预览(自定义按钮上传) 结果展示: 默认展示 2.点击按钮后,选择图片文件图片预览首先我们定义一个type为file的input,并将它隐藏,绘制一个button,在按钮点击 ...
pdf上传及预览；file上传pdf文件及预览；vue上传pdf文件及预览；vue-pdf预览pdf文件
需求:上传pdf文件,并点击可以打开预览.使用input的file功能即可完成,预览只需要跳转到pdf的url地址即可.还可以配合vue-pdf直接预览,点击看这篇. 以下代码可直接复制使用!!!有效 ...
实现拖拽上传文件的一款小控件——dropzone
由于专注所以专业.非常多小巧的东西乍一看非常不起眼,却在特定的领域表现不俗,就是由于集中了热情. dropzone就是这样一款小控件,实现拖拽上传.它不依赖于其他像jquery等JS库.并且支持多方面 ...
html5 上传超大文件,HTML5教程如何拖拽上传大文件
本篇教程探讨了HTML5教程如何拖拽上传大文件,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性 ...
[开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件
前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...
拖拽上传及读取文件实现
1.拖拽上传相关事件 2.拖拽上传简单实现 3.拖拽上传完整实现 4.读取文件实现 1.拖拽上传相关事件相关事件: ondragenter 拖着东西进入 ondragleave 拖着东西离开 ond ...
uploadify java 下载_uploadify java实现多文件上传和预览
本文实例为大家分享了java文件上传和预览实现代码,供大家参考,具体内容如下 1.下载uploadify插件 2.index.html #uploader { position: relative; ...
php 表格导入excel插件,BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤...
这篇文章主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传.预览.提交的导入Excel数据操作步骤,需要的朋友可以参考下 bootstrap ...
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件效果如图直接看代码吧 template部分 <div class="file-upload&q ...
minio实现大文件分片上传+断点续传+预览
minio实现大文件分片上传+断点续传+预览只提供后端java代码思路: 前端分片校验文件md5是否已经存在 --不存在创建临时桶存分片校验分块是否已经上传分块上传合并分块校验合成后md ...