使用Html5实现异步上传文件,支持跨域,带有上传进度条

使用HTML5实现异步上传文件可以通过使用FormData对象来实现，它可以捕获一个form表单中的所有表单控件的值，包括文件。

下面是实现异步上传文件，支持跨域和上传进度条的完整攻略：

1、在HTML中添加表单控件

在HTML页面中添加一个表单控件，其中包含一个文件控件。例如：

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

2、使用JavaScript实现异步上传

使用JavaScript来监听表单的提交事件，当表单提交时，使用FormData对象来取得表单中的值，并且使用XMLHttpRequest对象来进行异步上传，上传成功后显示上传进度条。例如：

var submitButton = document.getElementById('uploadForm');
submitButton.addEventListener('submit', function (e) {
    e.preventDefault();
    var input = document.getElementById('fileUpload');
    var file = input.files[0];
    var xhr = new XMLHttpRequest();
    var formData = new FormData();
    formData.append('fileUpload', file);
    xhr.open('POST', '/upload', true);
    xhr.upload.addEventListener('progress', function (event) {
        if (event.lengthComputable) {
            var percentComplete = event.loaded / event.total * 100;
            console.log(percentComplete + '% uploaded');
        }
    }, false);
    xhr.onload = function (evt) {
        console.log('upload complete');
    };
    xhr.send(formData);
}, false);

3、在服务端接收上传的文件

在服务端上使用Node.js的Express框架来接收上传的文件，例如：

var express = require('express');
var app = express();
var multer = require('multer');
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, '/uploads');
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname);
    }
});
var upload = multer({storage: storage});
app.post('/upload', upload.single('fileUpload'), function (req, res) {
    res.send('Successfully uploaded ' + req.file.filename);
});

这样就可以使用HTML5实现异步上传文件，支持跨域，带有上传进度条，在服务端上接收上传的文件。