一、文件上傳

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实现文件上传、文件预览、拖拽上传的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。