input和原生js文件上传

最新推荐文章于 2023-12-04 16:00:00 发布

寒墨茗殇

最新推荐文章于 2023-12-04 16:00:00 发布

阅读量350

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_40591925/article/details/132564833

版权

1.input上传

input 标签主要有以下几个属性

accept 设置上传文件的类型，默认为空，表示可以上传所有类型文件。常见的 MIME types
capture 摄像头，user 前置摄像头 environment 后置摄像头
multiple 是否可以选多个文件默认false
webkitdirectory 是否可以选择文件夹

上传图片并预览

<body>
  <input type='file'  onchange='upFile(this)'/> 
  <img style='display:none' id='img' />
</body>
<script>
  function upFile(event){
    var file=event.files[0]
    // 上传的file图片
    console.log(file)

    // 预览功能
    var fileReader = new FileReader();
    var DomImg=docudocument.getElementById('img')
    fileReader.onload = (e) => {
      // 获取选择图片的base64
      DomImg.style.display='block'
      DomImg.setAttribute('src',e.target.result)
    };
    fileReader.onerror = () => {
        DomImg.style.display='none'
    };
    fileReader.readAsDataURL(file);
  }
</script>

2.原生 JS 方式选择文件

showOpenFilePicker 选择文件。查看文档

options(可选参数)

multiple Boolean类型，是否可多选
excludeAcceptAllOption Boolean类型，是否排除允许全部类型选项，如下图
types Array类型，可选的文件类型数组。每个元素十个对象包含description和accept
1. description 文件类型的描述
2. accept 允许的文件类型对象，key为文件的MIME types，value为文件后缀名数组

通过window.showOpenFilePicker(options)获取FileSystemFileHandle 对象数组,

kind 文件或文件夹file directory
name 文件名

FileSystemFileHandle可用方法：

queryPermission() 查询当前句柄的当前权限状态。
requestPermission() 请求文件句柄的读或读写权限。
getFile() 返回一个Promise，解析为一个File对象，表示句柄所代表的条目在磁盘上的状态。
createWritable() 返回一个Promise，解析为一个新创建的FileSystemWritableFileStream对象，该对象可用于写入文件。

async function uploadFile(){
    var options = {
        types: [{
            description: '只允许上传图片文件',
            accept: {
                // "text/plain": [".txt"],
                // 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
                // 'application/vnd.ms-excel': ['.xls'],
                'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']
            }
        }],
        multiple: true, // 是否允许上传多个文件,
        excludeAcceptAllOption: true // 是否排除允许全部类型选项
    };
    try {
      // 打开图片选择
      const fileHandleList = await window.showOpenFilePicker(options);
      // 通过getFile()获取file
      const file = await fileHandleList[0].getFile();

      // 预览功能一
      var fileReader = new FileReader();
      fileReader.onload = (e) => {
        // 获取选择图片的base64
        console.log(e.target.result)
      };
      fileReader.onerror = () => {

      };
      fileReader.readAsDataURL(file);

      // 预览功能二
      // const buffer = await file.arrayBuffer();
      // const newImg = new Image();
      // const url = URL.createObjectURL(new Blob([buffer]));
      // newImg.onload = function() {
      //   console.log(url,'预览的图片地址')
      //   URL.revokeObjectURL(url);
      // };
      // newImg.src = url;
      
    } catch (error) {
      alert('该浏览器不支持showOpenFilePicker方法，请切换浏览器')
    }
};

showDirectoryPicker 选择文件夹。查看文档

async function getDir() {
  const dirHandle = await window.showDirectoryPicker();//打开选择文件
  const FileHandle  = await dirHandle.getFileHandle('3.jpg');//找到3.jpg文件
  console.log(dirHandle,FileHandle)
}

showSaveFilePicker 保存文件查看文档

const options = { 
    suggestedName: 'img',
     types: [
        {
          description: "PNG file",
          accept: {
            "image/png": [".png"],
          },
        },
        {
          description: "Jpeg file",
          accept: {
            "image/jpeg": [".jpeg"],
          },
         },
    ],
    //txt 的写入保存
    // types: [{
    //     description: '只允许保存txt格式文件',
    //     accept: {
    //         "text/plain": [".txt"],
    //     }
    // }]
}
const saveFile = async () => {
    const FileSystemFileHandle = await window.showSaveFilePicker(options);
    const w = await FileSystemFileHandle.createWritable();
    
    const blob = new Blob([])//文件的Blob
    await writable.write(blob);
    // await w.write('showSaveFilePicker');//存文本的写入
    await w.close();
};