大文件上传
1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用2.如何保证用户的使用体验3.如何解决页面请求接口大规模并发问题4.设计一套全站请求耗时统计工具
5.大文件上传
6.h5如何解决移动端适配问题7.实现站点一键换肤功能实现方式有哪些8.如何实现网页加载进度条9.常见图片懒加载方式有哪些10.cookie构成部分有哪些11.DNS协议了解多少12.函数式编程了解多少13.一直在window上面挂东西是否有什么风险14.小程序为什么会有两个线程15.如何通过设置失效时间清除本地存储的数据?16.如果不使用脚手架，如果用webpack构建一个自己的react应用17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数18.package.json 里面 sideEffects 属性的作用19.script 标签上有那些属性20.SPA 中使用 hash 路由时作用和意义21.用户访问页面白屏了，原因是啥如何排查?22.[代码实现]S 中如何实现大对象深度对比23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法24.<script> 标签放在 HTML 文档的 <body> 内底部25.虚拟滚动加加载的原理和实现思路26.ts二刷27.promise面试题28.命令行创建 uni-app 项目29.uniapp+v3的小知识点30.ts文件忽略校验31.['',''].join(" ").trim()32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)33.可视化点击x轴标签实现标签文字切换34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本35.uniapp+vue2实现下载相关-
传统表单提交方式
- 原理：利用HTML的
<form>标签，设置enctype="multipart/form - data"属性，允许用户选择本地文件并通过浏览器将文件以POST请求的方式发送到服务器。 - 示例代码（HTML）：
<form action="upload.php" method="post" enctype="multipart/form - data"> <input type="file" name="fileToUpload"> <input type="submit" value="Upload File"> </form> - 优点：简单直接，兼容性好，几乎所有浏览器都支持这种方式。
- 缺点：对于大文件，可能会出现上传中断后无法续传的情况；上传过程中用户体验较差，因为页面可能会被锁定，无法进行其他操作；上传速度受限于浏览器和服务器的性能以及网络状况，没有太多优化手段。
- 适用场景：适用于小文件或者对用户体验要求不高、文件上传频率较低的场景，如一些简单的企业内部文档上传系统。
- 原理：利用HTML的
-
Ajax分块上传
- 原理：将大文件分割成多个小块（chunks），通过Ajax技术逐块上传到服务器。服务器接收到每个小块后进行存储，最后将所有小块合并成完整的文件。
- 示例代码（JavaScript）：
- 首先定义文件分块大小，如
const CHUNK_SIZE = 1024 * 1024; // 1MB。 - 读取文件并分块：
const file = document.getElementById('fileInput').files[0]; const totalChunks = Math.ceil(file.size / CHUNK_SIZE); for (let i = 0; i < totalChunks; i++) { const start = i * CHUNK_SIZE; const end = Math.min((i + 1) * CHUNK_SIZE, file.size); const chunk = file.slice(start, end); const formData = new FormData(); formData.append('chunk', chunk); formData.append('chunkIndex', i); formData.append('totalChunks', totalChunks); // 使用Ajax发送分块 const xhr = new XMLHttpRequest(); xhr.open('POST', 'upload.php'); xhr.onload = function () { if (xhr.status === 200) { console.log(`Chunk ${i} uploaded successfully`); // 检查是否所有块都已上传，若是则可以通知服务器合并文件 if (i === totalChunks - 1) { console.log('All chunks uploaded. Notify server to merge.'); } } }; xhr.send(formData); } - 首先定义文件分块大小，如
- 优点：可以实现文件的断点续传，即如果上传过程中断，下次上传时可以从上次中断的位置继续上传；可以在上传过程中给用户提供更好的反馈，如进度条显示，因为可以知道每个小块的上传进度；可以更好地控制上传速度和流量，通过调整分块大小和上传频率来优化上传过程。
- 缺点：实现相对复杂，需要处理分块、合并等逻辑；对服务器端的要求较高，需要能够正确接收和处理分块文件并进行合并；可能会因为网络或服务器问题导致分块丢失或损坏，需要有相应的校验和重传机制。
- 适用场景：适用于对用户体验要求较高、需要支持断点续传的大文件上传场景，如网盘、在线视频上传等。
-
使用插件或库（如Plupload）
- 原理：Plupload是一个基于HTML5、Gears、Silverlight和Flash的文件上传工具。它通过检测浏览器的功能，选择最合适的上传方式来实现文件上传。例如，在支持HTML5的浏览器中，它可以利用HTML5的文件API进行高效上传，在不支持HTML5的浏览器中，可能会使用Flash或Silverlight来完成上传。
- 示例代码（基本使用）：
- 首先引入Plupload库的JavaScript和CSS文件。
<link rel="stylesheet" href="plupload/jquery.ui.plupload/css/jquery.ui.plupload.css"> <script src="plupload/plupload.full.min.js"></script> <script src="plupload/jquery.ui.plupload/jquery.ui.plupload.js"></script>- 在JavaScript中初始化Plupload：
$(function () { $("#uploader").plupload({ runtimes: 'html5,flash,silverlight,html4', url: 'upload.php', max_file_size: '10mb', chunk_size: '1mb', unique_names: true, // 其他配置选项，如过滤器、进度条显示等 filters: [ {title: "Image files", extensions: "jpg,gif,png"} ], init: { FilesAdded: function (up, files) { // 文件添加到上传队列时的处理 plupload.each(files, function (file) { console.log('File added: ', file.name); }); up.start(); }, UploadProgress: function (up, file) { // 上传进度更新时的处理 console.log('Upload progress: ', file.percent); }, Error: function (up, err) { // 上传出错时的处理 console.log('Error: ', err.message); } } }); }); - 优点：提供了跨浏览器的兼容性解决方案，能够自动选择最优的上传方式；具有丰富的功能，如文件过滤、进度显示、错误处理等；可以方便地进行定制化，以满足不同的应用场景。
- 缺点：需要引入额外的库文件，增加了项目的复杂度和文件大小；可能会受到插件本身的性能和稳定性影响，如Plupload的版本更新可能会带来一些兼容性问题。
- 适用场景：适用于需要在多种浏览器环境下实现大文件上传，并且希望快速集成一个功能丰富的上传解决方案的场景，如一些需要兼容旧浏览器的企业级应用。
本文来自博客园，作者：jialiangzai，转载请注明原文链接：https://www.cnblogs.com/zsnhweb/p/18646160
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！