原生js多文件上传插件

原生JavaScript多文件上传插件是一种允许用户通过网页界面一次性选择并上传多个文件的工具。这种插件通常基于HTML5的File API和XMLHttpRequest或Fetch API来实现文件的读取和上传。

基础概念

File API：允许网页脚本访问用户选择的本地文件。
XMLHttpRequest/Fetch API：用于与服务器进行交互，发送HTTP请求。
FormData：一种用于构造表单数据的接口，可以方便地构建键值对，并且可以异步上传文件。

类型

基于插件的：如jQuery File Upload, Dropzone.js等。
纯原生实现的：不依赖任何第三方库，完全使用原生JavaScript编写。

应用场景

社交媒体网站：允许用户批量上传图片或视频。
文件管理系统：提供批量上传文件的功能。
在线教育平台：教师可以一次性上传多个课件或作业文件。

示例代码

以下是一个简单的原生JavaScript多文件上传的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi File Upload</title>
</head>
<body>
<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">Upload</button>
<div id="progress"></div>

<script>
function uploadFiles() {
    const files = document.getElementById('fileInput').files;
    const formData = new FormData();

    for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
    }

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
        document.getElementById('progress').innerText = 'Upload complete!';
    })
    .catch((error) => {
        console.error('Error:', error);
        document.getElementById('progress').innerText = 'Upload failed.';
    });
}
</script>
</body>
</html>

遇到的问题及解决方法

问题1：上传进度不显示

原因：可能是因为没有正确处理上传过程中的进度事件。 解决方法：使用XMLHttpRequest的upload.onprogress事件来跟踪上传进度。

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        console.log(`Upload progress: ${percentComplete.toFixed(2)}%`);
    }
};

问题2：文件类型或大小限制

原因：用户可能尝试上传不允许的文件类型或过大的文件。 解决方法：在上传前检查文件的类型和大小。

for (let i = 0; i < files.length; i++) {
    if (!files[i].type.match(/image\/.*/)) {
        alert('Only images are allowed!');
        return;
    }
    if (files[i].size > 5 * 1024 * 1024) { // 5MB limit
        alert('File size exceeds the limit of 5MB!');
        return;
    }
    formData.append('files[]', files[i]);
}

通过上述方法，可以有效地实现一个原生JavaScript多文件上传功能，并处理一些常见的上传问题。