大文件上传

传统表单提交方式

• 原理：利用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>
  

• 优点：简单直接，兼容性好，几乎所有浏览器都支持这种方式。
• 缺点：对于大文件，可能会出现上传中断后无法续传的情况；上传过程中用户体验较差，因为页面可能会被锁定，无法进行其他操作；上传速度受限于浏览器和服务器的性能以及网络状况，没有太多优化手段。
• 适用场景：适用于小文件或者对用户体验要求不高、文件上传频率较低的场景，如一些简单的企业内部文档上传系统。

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的版本更新可能会带来一些兼容性问题。
• 适用场景：适用于需要在多种浏览器环境下实现大文件上传，并且希望快速集成一个功能丰富的上传解决方案的场景，如一些需要兼容旧浏览器的企业级应用。