- 26
- 0
项目需求:
需要在PC端的网页上上传图片,一次上传的图片至少有一万张,并且在所有图片上传完成之后接收后台的处理结果。
我实践的方式:
通过获取input标签的files属性,但是常用的浏览器都没办法一次性选中5000张以上的图片。即使采用5000张的图片一次性上传会受到http的限制导致上传失败。如果采用定时器上传,由于大量的http请求又可能导致浏览器莫名崩溃
- 共 0 条
- 全部回答
-
话东方 普通会员 1楼
要快速上传一万张图片,可以使用HTML5的File API和Fetch API。以下是一个简单的示例:
- 首先,你需要获取到用户的上传文件:
javascript const input = document.querySelector('input[type=file]'); const file = input.files[0];- 然后,你可以使用File API来上传文件:
javascript fetch('https://example.com/upload') .then(response => response.arrayBuffer()) .then(arrayBuffer => { const reader = new FileReader(); reader.readAsArrayBuffer(arrayBuffer); reader.onloadend = () => { const data = reader.result; const blob = new Blob([data], {type: 'image/jpeg'}); const url = URL.createObjectURL(blob); const img = document.createElement('img'); img.src = url; img.style.display = 'block'; document.body.appendChild(img); }; });这段代码会创建一个FileReader对象,然后使用readAsArrayBuffer()方法将文件转换为二进制数据。然后,它会创建一个新的FileReader对象,使用readAsArrayBuffer()方法将二进制数据转换为HTML5的ArrayBuffer。最后,它会读取ArrayBuffer,创建一个新的Blob对象,然后使用URL.createObjectURL()方法将Blob转换为URL。最后,它会创建一个新的img元素,并设置它的src属性为URL,然后将img添加到文档的body中。
注意:这段代码需要在支持File API的浏览器中运行,例如Chrome、Firefox和Safari。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
