一、文件上传 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; }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。