h5 技术做健康类网站,为企业做一个网站多少钱,镇江网站营销推广,菜单宣传网站怎么做文章目录 获取文件对象文件上传#xff08;秒传、分片上传、断点续传、重传#xff09;优化 获取文件对象
input标签的onchange方法接收到的参数就是用户上传的所有文件
html langenheadtitle文件上传/titlestyle#inp… 文章目录 获取文件对象文件上传秒传、分片上传、断点续传、重传优化 获取文件对象
input标签的onchange方法接收到的参数就是用户上传的所有文件
html langenheadtitle文件上传/titlestyle#inputFile,#inputDirectory {display: none;}#dragarea{width: 100%;height: 100px;border: 2px dashed #ccc;}.dragenter{background-color: #ccc;}/style/headbody!-- 1. 如何上传多文件multiple2. 如何上传文件夹为了兼顾各浏览器兼容性需设置三个属性webkitdirectory mozdirectory odirectory3. 如何实现拖拽上传input默认是有拖拽性质的但是由于浏览器兼容性问题开发一般不使用一般使用div阻止默认事件以及通过拖拽api实现4. 如何获取选择的所有文件--div iddragarea/divinput idinputFile typefile multiple!-- 如果不想用input自带的上传文件的样式可以通过button的click触发input的点击事件来上传文件 --button idbuttonFile上传文件/buttoninput idinputDirectory typefile multiple webkitdirectory mozdirectory odirectorybutton idbuttonDirectory上传文件夹/buttonul classfileList/ulscriptconst inputFile document.getElementById(inputFile)const buttonFile document.getElementById(buttonFile)const inputDirectory document.getElementById(inputDirectory)const buttonDirectory document.getElementById(buttonDirectory)const dragarea document.getElementById(dragarea)const fileList document.getElementById(fileList)const appendFile (fileList) {for(const file in fileList){const li document.getElementById(li)li.innerText ${file.name}-${file.name.split(.)[1]}-${file.size}fileList.appendChild(li)}}const traverseFile (entry) {if(entry.isFile){entry.file((file) {const li document.getElementById(li)li.innerText ${file.name}-${file.name.split(.)[1]}-${file.size}fileList.appendChild(li)})}else if(entry.isDirectory){traverseDirectory(entry)}}const traverseDirectory (directory) {const reader directory.createReader()// 创建读取器读取文件夹reader.readEntries((entries) {for(const entry of entries) {traverseFile(entry)}})}buttonFile.onclick () {inputFile.click()}inputFile.onchange (e) {const files e.target.files// 获得用户上传的所有文件appendFile(files)}inputDirectory.onchange (e) {console.log(e.target.files)const files e.target.files// 获得用户上传的所有文件appendFile(files)}buttonDirectory.onclick () {inputDirectory.click()}dragarea.ondragenter (e) {e.preventDefault();console.log(拖拽进入区域)dragarea.classList.add(dragenter)}dragarea.ondragover (e) {e.preventDefault();console.log(拖拽着悬浮在区域上方)dragarea.classList.add(dragenter)}dragarea.ondragleave (e) {e.preventDefault();console.log(拖拽离开)dragarea.classList.remove(dragenter)}// 拖拽放开dragarea.ondrop (e) {e.preventDefault();dragarea.classList.remove(dragenter)const items e.dataTransfer.items// 拖拽进来的所有文件for(const item of items){const entry item.webkitGetAsEntry()traverseFile(entry)}}/script/body
/html文件上传秒传、分片上传、断点续传、重传
秒传调用后端的接口将md5值传过去后端判断如果这个md5值对应的文件是否已经合并如果已经合并则返回文件上传成功 分片上传每片大小chunk_size为1m假如文件1.5m那么会被分成2片使用file.slice截取[0,1)再截取[1,1.5 断点续传文件上传前会调用后端的接口将md5值传过去后端判断如果这个md5值对应的文件是否已经合并如果没有合并会返回这个md5值已经上传的切片的索引前端重新上传剩余索引的片 并发控制假如我们把文件切成了100片如果一下子把这100片全传给后端会给后端造成并发压力所以在发送前可以在前端进行并发控制一下我们将所有的请求都放在队列里每次从队列里弹出几个请求来发送 明明浏览器可以控制请求并发为什么前端还要自己控制并发请求 避免浏览器并发限制浏览器对同一域名的并发请求数量是有限制的通常是 6-8 个具体取决于浏览器和协议。如果前端不控制并发请求可能会导致大量请求堆积超出浏览器的并发限制从而阻塞其他重要请求如关键 API 或资源加载提升用户体验如果一次性发送过多请求可能会导致网络带宽被占满影响页面其他资源的加载如图片、CSS、JS 等并且可能会导致部分请求超时或失败从而浪费网络资源和用户流量。错误处理和重试机制手动控制并发可以更好地实现错误处理和重试机制。 例如某个请求失败后可以立即重试而不是等待所有请求完成后再处理错误。优先级控制手动控制并发可以实现请求的优先级管理。例如某些关键请求可以优先发送而低优先级的请求可以稍后处理。兼容性和稳定性不同浏览器对并发请求的处理方式可能不同手动控制并发可以确保应用在各种浏览器中表现一致。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,initial-scale1.0title文件上传/titlescript srchttps://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.js/scriptstyle#inputFile,#inputDirectory {display: none;}#dragarea {width: 100%;height: 100px;border: 2px dashed #ccc;}.dragenter {background-color: #ccc;}/style
/headbodydiv classdragarea/divinput classinputFile typefile multiple!-- 如果不想用input自带的上传文件的样式可以通过button的click触发input的点击事件来上传文件 --button classbuttonFile上传文件/buttoninput classinputDirectory typefile multiple webkitdirectory mozdirectory odirectorybutton classbuttonDirectory上传文件夹/buttonbutton classbuttonUpload点击上传/buttonul classfileListElement/ulscript// 文件交互相关const fileList []const chunk_size 1 * 1024 * 1024const requestQueue []const maxRequest 2// 最大请求数量let currentRequest 0// 当前请求数const inputFile document.getElementsByClassName(inputFile)[0]const buttonFile document.getElementsByClassName(buttonFile)[0]const inputDirectory document.getElementsByClassName(inputDirectory)[0]const buttonDirectory document.getElementsByClassName(buttonDirectory)[0]const dragarea document.getElementsByClassName(dragarea)[0]const fileListElement document.getElementsByClassName(fileListElement)[0]const buttonUpload document.getElementsByClassName(buttonUpload)[0]// 将上传的文件展示在按钮下方const showFileList (files) {for (const file in files) {const li document.getElementById(li)li.innerText ${file.name}-${file.name.split(.)[1]}-${file.size}fileListElement.appendChild(li)fileList.push(file)}}const traverseFile (entry) {// 拖拽进来的如果是文件直接展示在按钮下方if (entry.isFile) {entry.file((file) {const li document.getElementById(li)li.innerText ${file.name}-${file.name.split(.)[1]}-${file.size}fileList.appendChild(li)})} else if (entry.isDirectory) {// 拖拽进来的如果是文件夹读文件夹获得文件夹里面的文件traverseDirectory(entry)}}const traverseDirectory (directory) {const reader directory.createReader()reader.readEntries((entries) {for (const entry of entries) {traverseFile(entry)}})}buttonFile.onclick () {inputFile.click()}inputFile.onchange (e) {const files e.target.files // 获得用户上传的所有文件showFileList(files)}inputDirectory.onchange (e) {console.log(e.target.files)const files e.target.files // 获得用户上传的所有文件showFileList(files)}buttonDirectory.onclick () {inputDirectory.click()}dragarea.ondragenter (e) {e.preventDefault();console.log(拖拽进入区域)dragarea.classList.add(dragenter)}dragarea.ondragover (e) {e.preventDefault();console.log(拖拽着悬浮在区域上方)dragarea.classList.add(dragenter)}dragarea.ondragleave (e) {e.preventDefault();console.log(拖拽离开)dragarea.classList.remove(dragenter)}// 拖拽放开dragarea.ondrop (e) {e.preventDefault();dragarea.classList.remove(dragenter)const items e.dataTransfer.itemsfor (const item of items) {const entry item.webkitGetAsEntry()traverseFile(entry)}}// 文件上传buttonUpload.onclick () {for (const file of fileList) {if (file.size chunk_size) {uploadSingleFile(file)} else {uploadLargeFile(file)}}}// 单文件一整个文件上传// 文件上传通过formData传输因为formData是前后端都认识的格式file是只有前端才认识的格式后端不认识const uploadSingleFile (file) {const formData new FormData()formData.append(file, file) // 通过append往formData身上添加对象如果formData身上已有file对象会覆盖try {axios.post(http://127.0.0.1:3001/upload, formData, {headers: {content-type: multipart/form-data}})} catch (error) {throw error}}// 大文件上传const uploadLargeFile async (file) {// 创建文件hash。创建整个文件的hash即可每个片不用创建hash因为每片是调用后端的方法上传的返回成功即上传成功const md5 await createFileMd5(file)// 大文件分片const chunksList createChunkFile(file)// 创建文件分片对象const chunkListObj createChunkFileObj(chunksList, file, md5)// 将md5值传给后端接口判断文件是否在服务器上存在如果存在后端返回isExistObj.isExists为true则秒传成功// 如果不存在后端会返回给你此md5值上传了哪些片已上传的片的索引放在chunkIds中const isExistObj await juedgeFileExist(file, md5)if (isExistObj isExistObj.isExists) {alert(文件已秒传成功)return}// 文件上传await asyncPool(chunkListObj, isExistObj.chunkIds) // chunkIds后端返回的已上传的分片的索引// await Promise.all(promises)concatChunkFile(file, md5)// 文件上传完毕调用后端合并文件的接口}// 创建文件的md5值const createFileMd5 (file) {return new Promise((resolve, reject) {const reader new FileReader()// reader.readAsArrayBuffer(file)读取完毕后会调用onload读取失败调用onerror读取到的内容在e.target.result中reader.onload (e) {const md5 SparkMD5.ArrayBuffer.hash(e.target.result)resolve(md5)}reader.onerror () {reject(error)}reader.readAsArrayBuffer(file)})}// 创建文件分片每片大小chunk_size为1m假如文件1.5m那么会被分成2片使用file.slice截取[01)再截取[1,1.5const createChunkFile (file) {let current 0const chunkList []while (current file.size) {chunkList.push(file.slice(current, Math.min(current chunk_size, file.size)))current chunk_size}return chunkList}// 创建文件分片对象。将文件的md5、文件名、本片在整个文件中的索引都传入这个对象调用后端接口上传时会用到的数据都可以封装进来const createChunkFileObj (chunkList, file, md5) {return chunkList.map((chunk, index) {return {file: chunk,md5,name: file.name,index: index,}})}// 文件分片上传const uploadChunkFile (chunkListObj, chunkIds) {return chunkListObj.filter((item,index) (!chunkIds.includes(index)))// 过滤掉已经上传的切片让已经上传的切片没有下面那个函数.map((chunk, index) {return () {const formData new FormData()formData.append(file, chunk.file, ${chunk.md5}-${chunk.index})formData.append(name, chunk.name)formData.append(timestamp, Date.now().toString()) // 防止走缓存try {axios.post(http://127.0.0.1:3001/upload/large, formData, {headers: {content-type: multipart/form-data}})} catch (error) {return Promise.reject(error)throw error}}})}// 判断文件是否存在const juedgeFileExist async (file, md5) {try {const response await axios.post(http://127.0.0.1:3001/upload/exists, formData, {params: {name: file.nam,md5,}})return response.data.data} catch (error) {return {}throw error}}// 合并请求const concatChunkFile (file, md5) {try {axios.post(http://127.0.0.1:3001/upload/concatFiles, {name: file.nam,md5,})} catch (error) {throw error}}// 把要发送的函数放在队列里每次从头部取一个函数调用这样就可以控制并发数量const asyncPool (chunkListObj, chunkIds) {return new Promise((resolve,reject) {requestQueue.push(...uploadChunkFile(chunkListObj, chunkIds))run(resolve,reject)})}const run (resolve,reject) {while(currentRequest maxRequest requestQueue.length 0){const task requestQueue.shift()currentRequesttask().then().finally(() {currentRequest--run(resolve,reject)})}if(currentRequest 0 requestQueue.length 0) {resolve()}}/script
/body/html优化
