前端对文件的操作以及提交

最新推荐文章于 2024-07-25 17:27:47 发布

原创最新推荐文章于 2024-07-25 17:27:47 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

differ 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了前端对文件的操作，包括使用HTML5的file上传组件，通过onchange事件获取文件信息，如name、size和type，并利用FileReader进行异步读取文件到内存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(查看资料https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader、

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data）

前端对文件操作的知识点：

1、h5文件上传组件，将type设置为file，当文本域改变的时候，onchange事件触发,accept为设置可见的文件类型

<input type="file" id="file" onchange="uploadFile()" accept="">

2.获得文件的name,size,type等属性值

<input type="file" id="file" onchange="uploadFile()" accept="">

  uploadFile(){
    let file=document.querySelector("#file");
    
    //获得文件的name,size,type,
    let fileName=file.files[0].name;
    let fileSize=file.files[0].size;
    let fileType=file.files[0].type;
    
    //fileReader函数
     file.fileReader   
  }

3.fileReader( )函数，js异步读取计算机的文件进入内存

<input type="file" id="file" onchange="uploadFile()" accept="">

  uploadFile(){
    let file=document.querySelector("#file");
    //获得文件的name,size,type,
    let fileName=file.files[0].name;
    let fileSize=file.files[0].size;
    let fileType=file.files[0].type;
    
    //fileReader
    //readAsText(file,encoding)接受一个file dom ,以及编码方式
     let readText=new readAsText(file);
    file.onload=function(e){
        console.log('e.target.e',e.target.reult);
    }
    
    //readAsDataURL 读取img的文件，返回一串base64位的编码
    let readUrl=new readAsDataUrl(file);
    file.onload=function(e){
        console.log('e.result',e.result);
    }
    
    //abort()方法可以中止文件的发送

  }