提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

浏览器上传文件的三种路径

文件上传浏览器 路径 三种
2023-06-13 09:16:14 时间

cv战士福音，可以带走的浏览器上传文件的三种方案，直接落地。

我敢打五毛钱的赌。 前端工程化完善度越来越高，2022年前端大概会有30%的工作被更高级的工作代替。 以前花基础界面的，将不再存在。反之，复杂界面的工作将越来越重。 算法逻辑，底层架构经验，才是新时代不落伍的保证。

由于安全考虑，浏览器只允许用户在进行三个操作时，触发上传本地文件：

  1. 通过 input type="file" 选择本地文件
  2. 通过拖拽的方式把文件拖过来
  3. 在编辑框里面复制粘贴

利用input上传文件

第一种是最常用的手段，通常会自定义一个按钮，然后在用户点击时触发被隐藏的input，因为type="file"的input不好改变样式。

<input type="file" id="file-input" name="fileContent">

但是我有更好的方法去触发，在代码中几乎没有用到过上面的写法。

标准答案是事件触发，直接在js里面完成相关事件，非常灵活。如果把多处配置，一点触发比作水桶腰（宽而臃肿），那么一处配置一处触发就像一个容易得到的婀娜多姿的美人。大多文章把这一段写的又长又臭，如果你觉得我够良心，给个赞吧。

function insertFile(callback) {

  const input = document.createElement('input');

  input.type = 'file';

  // input.accept = '.rmf,.km,.txt,.md';

  input.addEventListener('change', (event: any) => {

    const file = event.target.files[0];

// file 解析： https://developer.mozilla.org/zh-CN/docs/Web/API/File

    if (event.target.files[0].size > 10 * 1024 * 1024) {

      message.error('文件不能大于10mb');

      return;

    }

    const file_name = file.name;

    const file_reader = new FileReader();

    file_reader.onload = event => {

      const str = event.target.result;

      console.log('filePlugins insertFile 弹出窗口，触发上传 str', event, file_name);

callback(str)

    };

    file_reader.readAsDataURL(file);

  });

  input.click();

}

insertFile(function (str){

// TODO ..

})

其执行结果如下：

其中accept 指定可以上传的文件

如果你要指定图片，input.accept = 'image/*'即可。

其他文件如下，可直接看accept api

const input = document.createElement('input');

input.accept = 'audio/*' // 声频

input.accept = 'video/*' // 视频

input.accept = 'image/*,.pdf'// 图片和pdf

参考：

前端本地文件操作与上传

相关文章