选择文件的js方法
自定义的 file.js文件
1 let fileInputEle; 2 let fileInputHandlerDefer = {}; 3 import { startsWith } from "lodash-es"; 4 // 选择文件 5 export const getFileByUserSelect = (limitTypes, multiple) => { 6 if (!fileInputEle) { 7 fileInputEle = document.createElement("input"); 8 fileInputEle.setAttribute("type", "file"); 9 fileInputEle.style.display = "none"; 10 fileInputEle.addEventListener("change", () => { 11 if (fileInputEle.files && fileInputEle.files.length) { 12 if (multiple) { 13 fileInputHandlerDefer.resolve(fileInputEle.files); 14 } else { 15 fileInputHandlerDefer.resolve(fileInputEle.files[0]); 16 } 17 } else { 18 fileInputHandlerDefer.reject(); 19 } 20 }); 21 } 22 fileInputEle.removeAttribute("multiple"); 23 fileInputEle.removeAttribute("accept"); 24 fileInputEle.value = ""; 25 if (multiple) { 26 fileInputEle.setAttribute("multiple", "multiple"); 27 } 28 if (limitTypes && limitTypes.length) { 29 fileInputEle.setAttribute( 30 "accept", 31 limitTypes.map(one => (startsWith(one, ".") ? one : `.${one}`)).join(",") 32 ); 33 } 34 return new Promise((resolve, reject) => { 35 fileInputHandlerDefer.resolve = resolve; 36 fileInputHandlerDefer.reject = reject; 37 fileInputEle.click(); 38 }); 39 }; 40 41 // 42 export const readFile = (file, type, charset) => { 43 let reader = new FileReader(); 44 return new Promise((resolve, reject) => { 45 reader.onload = function () { 46 resolve(this.result); 47 }; 48 reader.onerror = function () { 49 reject(); 50 }; 51 let method; 52 switch (type) { 53 case "arrayBuffer": 54 method = "readAsArrayBuffer"; 55 break; 56 case "binaryString": 57 method = "readAsBinaryString"; 58 break; 59 case "dataURL": 60 method = "readAsDataURL"; 61 break; 62 case "text": 63 method = "readAsText"; 64 break; 65 } 66 // 只有 text 需要 charset 参数 67 reader[method](file, charset || "uft-8"); 68 }); 69 };
使用示例:
1 // 只允许选择jpg和png图片,且支持多选文件 2 getFileByUserSelect(["jpg","png"],true).then(files=>{ 3 console.log(files) 4 })
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」