简单的文件操作-分片上传【h5技术】

最新推荐文章于 2024-07-23 11:00:12 发布

a黑大帅｀

最新推荐文章于 2024-07-23 11:00:12 发布

阅读量503

点赞数 1

分类专栏： H5 前端上传文章标签： javascript html5

本文链接：https://blog.csdn.net/www569006806/article/details/124184560

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

上传

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML5实现文件分片上传，通过JavaScript操作文件切片，结合Fetch API进行逐片上传，使得大文件上传变得简单易行。示例代码展示了如何设置上传的每片大小、递归上传逻辑以及文件信息处理。

摘要由CSDN通过智能技术生成

在以前我们用分片上传很麻烦可能还需要用到一些库，今天给大家带来H5的分片上传，简单易学

<input type="file" id="input"></input>
<button id="btn">上传</botton>

let chunkSize = 1024,   // 每次上传的文件大小 
    index = 0;   // 递归上传索引

btn.addEventListener('click',upload)

function upload(){
  const file = input.files[0]
  const [fileName,ext] = file.name.split('.')  // 获取文件名
  let start = index * chunkSize  // 每次切片的开始
  if(start > file.size) return
  
  const blob = file.slice(start,start + chunkSize)
  const formData = new FormData()
  const blobName = `${fileName}${index}.${ext}`
  const blobFile = new File([blob],blobName)
  
  formData.append('file',blobFile)

  fetch('/upload',{
    method: 'post',
    body: formData,
  }).then(()=>{
     index++
     upload()
  })
}