选择文件的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 })

 

posted @ 2021-12-16 11:15  蛙仔  阅读(2018)  评论(0)  编辑  收藏  举报