原生js和jquery怎么上传

原生JS和jQuery上传文件的方法包括：使用原生JavaScript的FormData对象、XMLHttpRequest对象，通过jQuery的ajax方法、FormData对象。 使用原生JavaScript和jQuery来上传文件可以有效地处理文件上传任务，并且在处理各种浏览器兼容性问题时，各有优劣。下面将详细介绍如何在实际项目中使用这些方法来实现文件上传。

一、使用原生JavaScript实现文件上传

1、FormData对象

FormData对象是原生JavaScript提供的一个接口，用于构建包含表单数据的对象。通过这个对象，我们可以轻松地将文件数据传递到服务器。

let form = document.querySelector('form');
let formData = new FormData(form);
// 添加额外的字段
formData.append('username', 'JohnDoe');
let xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log('File uploaded successfully');
    } else {
        console.error('An error occurred');
    }
};
xhr.send(formData);

2、XMLHttpRequest对象

XMLHttpRequest对象允许你在客户端与服务器进行交互。它提供了一个简单的方式来上传文件。

let fileInput = document.querySelector('input[type="file"]');
let file = fileInput.files[0];
let xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log('File uploaded successfully');
    } else {
        console.error('An error occurred');
    }
};
let formData = new FormData();
formData.append('file', file);
xhr.send(formData);

二、使用jQuery实现文件上传

1、jQuery的ajax方法

jQuery的ajax方法提供了更简洁的语法来发送异步请求，同时也支持FormData对象。

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
</form>

$('#uploadForm').on('submit', function(e) {
    e.preventDefault();
    let formData = new FormData(this);
    $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log('File uploaded successfully');
        },
        error: function(error) {
            console.error('An error occurred');
        }
    });
});

2、FormData对象与jQuery结合

FormData对象与jQuery结合使用能更方便地处理表单数据。

let form = $('#uploadForm')[0];
let formData = new FormData(form);
$.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        console.log('File uploaded successfully');
    },
    error: function(error) {
        console.error('An error occurred');
    }
});

三、文件上传进度显示

为了让用户了解文件上传的进度，可以使用XMLHttpRequest对象的onprogress事件或者jQuery的ajax方法的xhr选项。

1、使用XMLHttpRequest的onprogress事件

let xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
        let percentComplete = (event.loaded / event.total) * 100;
        console.log(`Uploaded ${percentComplete}%`);
    }
};

2、使用jQuery的xhr选项

$.ajax({
    xhr: function() {
        let xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(event) {
            if (event.lengthComputable) {
                let percentComplete = (event.loaded / event.total) * 100;
                console.log(`Uploaded ${percentComplete}%`);
            }
        }, false);
        return xhr;
    },
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        console.log('File uploaded successfully');
    },
    error: function(error) {
        console.error('An error occurred');
    }
});

四、跨浏览器兼容性

在现代浏览器中，FormData和XMLHttpRequest对象已经得到了广泛的支持。然而，如果需要支持非常旧的浏览器，可以考虑使用一些polyfill库。

1、使用Polyfill库

可以使用像blueimp/jQuery-File-Upload这样的库来增强跨浏览器的兼容性。

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.28.0/js/jquery.fileupload.min.js"></script>

$('#uploadForm').fileupload({
    url: '/upload',
    dataType: 'json',
    done: function(e, data) {
        console.log('File uploaded successfully');
    },
    progressall: function(e, data) {
        let progress = parseInt(data.loaded / data.total * 100, 10);
        console.log(`Uploaded ${progress}%`);
    }
});

五、服务器端处理

无论是使用原生JavaScript还是jQuery，服务器端的处理逻辑大致相同。下面是一个简单的Node.js服务器端示例：

1、Node.js服务器端示例

const express = require('express');
const multer = require('multer');
const app = express();
const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function(req, file, cb) {
        cb(null, file.originalname);
    }
});
const upload = multer({ storage: storage });
app.post('/upload', upload.single('file'), (req, res) => {
    res.send('File uploaded successfully');
});
app.listen(3000, () => {
    console.log('Server started on http://localhost:3000');
});

2、其他服务器端语言

其他服务器端语言如PHP、Python、Java等，都有相应的文件上传处理模块。这里只是提供一个Node.js的示例，具体实现可以根据实际需求选择合适的技术栈。

六、上传大文件的处理

对于大文件上传，可以考虑使用分块上传技术。分块上传将大文件分成多个小块，逐块上传，可以有效避免上传失败的问题。

1、分块上传的基本思路

将文件分成多个小块
逐块上传到服务器
服务器接收到所有小块后进行合并

2、分块上传示例

let fileInput = document.querySelector('input[type="file"]');
let file = fileInput.files[0];
let chunkSize = 1024 * 1024; // 1MB
let totalChunks = Math.ceil(file.size / chunkSize);
for (let i = 0; i < totalChunks; i++) {
    let start = i * chunkSize;
    let end = Math.min(start + chunkSize, file.size);
    let chunk = file.slice(start, end);
    let formData = new FormData();
    formData.append('file', chunk);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', totalChunks);
    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/uploadChunk', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log(`Chunk ${i + 1}/${totalChunks} uploaded successfully`);
        } else {
            console.error('An error occurred');
        }
    };
    xhr.send(formData);
}

3、服务器端合并文件

服务器端需要接收到所有小块后，将它们合并成一个完整的文件。

const fs = require('fs');
const path = require('path');
const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/uploadChunk', upload.single('file'), (req, res) => {
    let chunkIndex = parseInt(req.body.chunkIndex);
    let totalChunks = parseInt(req.body.totalChunks);
    let filePath = path.join(__dirname, 'uploads', req.file.originalname);
    fs.appendFileSync(filePath, fs.readFileSync(req.file.path));
    fs.unlinkSync(req.file.path);
    if (chunkIndex === totalChunks - 1) {
        res.send('File uploaded and merged successfully');
    } else {
        res.send(`Chunk ${chunkIndex + 1} uploaded successfully`);
    }
});
app.listen(3000, () => {
    console.log('Server started on http://localhost:3000');
});

通过以上步骤，可以实现原生JavaScript和jQuery的文件上传功能，并且详细讨论了各种实现方式和技术细节。无论是小文件的简单上传，还是大文件的分块上传，都可以根据实际需求进行选择和实现。