js 文件上传，文件类型添加属性

JavaScript 用于实现文件上传和为文件添加类型属性，通常是通过表单（form）和文件输入（file input）元素来完成的。在现代浏览器中，我们可以利用 HTML5 提供的 File API 来获取文件信息，并通过 JavaScript 处理文件数据。

以下是使用 JavaScript 实现文件上传，并为文件添加类型属性的基本步骤：

1. 创建文件上传的 HTML 表单，并添加一个文件输入类型元素：

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" id="fileInput" accept=".jpg, .png" multiple />
    <input type="button" value="上传文件" onclick="uploadFiles()" />
</form>

在上面的代码中，`accept` 属性限制了用户可以选择的文件类型，只允许.jpg和.png格式的图片文件。`multiple` 属性允许用户选择多个文件。

2. 在 JavaScript 中添加处理上传和添加文件类型属性的函数：

function uploadFiles() {
    var files = document.getElementById('fileInput').files;
    var file;
    var formData = new FormData();

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

        // 这里可以添加文件类型的属性，例如：
        // 假设我们知道文件类型，可以根据文件扩展名设置一个类型属性
        if (file.name.endsWith('.jpg')) {
            file.type = 'image/jpeg';
        } else if (file.name.endsWith('.png')) {
            file.type = 'image/png';
        }
        // 将文件和类型信息一起添加到表单数据中
        formData.append('fileType', file.type);
    }

    // 使用 XMLHttpRequest 或者 fetch API 发送文件数据
    // 例如使用 XMLHttpRequest:
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            alert('上传成功');
        } else {
            alert('上传失败');
        }
    };
    xhr.send(formData);
}

上面的代码中，通过获取`fileInput`元素中的文件列表，并创建一个`FormData`对象来构建上传文件所需的数据。在循环中，我们为每个文件添加了类型信息，并通过`FormData.append`方法将文件及类型信息添加到表单数据对象中。然后，可以使用`XMLHttpRequest`或者现代的`fetch` API将这些数据发送到服务器进行处理。