JS-ajax-file-upload

优质

小牛编辑

131浏览

2023-12-01

Ajax 文件上传-异步上传方案

使用第三方控件（Flash，ActiveX, 浏览器插件等）

优点：

交互与可控性好（多文件、进度展示、续传、暂停）
性能好（可使用底层协议通信）

缺点：

需要浏览器安装插件

使用隐藏的iframe模拟异步上传

优点：

浏览器原生支持，不需要插件
广泛的浏览器兼容性

缺点：

交互差，体验差，上传过程基本不可控
性能差

关键技术点：

form指定target，提交结果定向到隐藏的iframe。
提交完成后，iframe中页面与主页面通信，通知上传结果及服务端文件信息。

html


<form action="/upload2" enctype="multipart/form-data" method="post" target="frm" onsubmit="loading(true);">
    <p id="upfile">
    附件： <input type="file" name="myfile" style="display: inline">
    </p>
    <p id="upbtn">
    <input class="btn btn-primary btn-sm" style="padding-left:50px;padding-right: 50px;" type="submit" value="异步上传">
    <span id="uptxt" style="display: none">正在上传...</span>
    </p>
</form>

<div id="flist" style="border:1px dotted darkgray;"></div>

javascript


// 上传完成后的回调
function uploadFinished(fileName) {
    addToFlist(fileName);
    loading(false);
}

function addToFlist(fname) {
    var temp = ["<p id='" + fname + "'>",
                fname,
        "<button onclick='delFile(\"" + fname + "\");'>删除</button>",
                "</p>"
    ];
    $("#flist").append(temp.join(""));
}

function delFile(fname) {
    console.log('to delete file: ' + fname);
    // TODO: 请实现
}

function loading(showloading) {
    if (showloading) {
        $("#uptxt").show();
    } else {
        $("#uptxt").hide();
    }
}

node.js


var express = require('express');
var router = express.Router();

var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();

var fs = require('fs');

router.all('/', function (req, res) {
    res.sendFile('../public/index.html');
});

router.post('/upload2', multipartMiddleware, function(req, res) {
    console.log(req.body);
    console.log(req.files);

    // 实际编程时，一般要将临时文件移动到目标位置，之后删除临时文件
    // 课程中为简化操作，直接将临时文件当成目标文件
    var fpath = req.files.myfile.path;
    var fname = fpath.substr(fpath.lastIndexOf('\\') + 1);

    setTimeout(function() {
        var ret = ["<script>",
            "window.parent.uploadFinished('" + fname + "');",
            "</script>"];
        res.send(ret.join(""));
    }, 3000);

});

module.exports = router;

使用xhr level 2 纯ajax异步上传

优点：

支持H5的浏览器原生支持，不需要插件
交互性较好

缺点：

受浏览器支持限制

关键过程：

创建FormData，放入待上传文件
通过xhr操作将FormData发送到服务器，实现文件上传
绑定progress、load、error等事件监听传输过程并在页面显示动态交互信息

html


<div>
    <p id="upfile">附件： <input type="file" id="myfile" style="display: inline"></p>
    <p id="upbtn">
        <input class="btn btn-primary btn-sm" style="padding-left:50px;padding-right: 50px;" type="button" value="异步上传" onclick="upload();">
        <span id="uptxt" style="display: none">正在上传...</span>
        <span id="upprog"></span>
        <button id="stopbtn" style="display:none;">停止上传</button>
    </p>
</div>

<div id="flist" style="border:1px dotted darkgray;"></div>

javascript


function upload() {
    // 1.准备FormData
    var fd = new FormData();
    fd.append("myfile", $("#myfile")[0].files[0]);

    // 创建xhr对象
    var xhr = new XMLHttpRequest();

    // 监听状态，实时响应
    // xhr 和 xhr.upload 都有progress事件，xhr.progress是下载进度，xhr.upload.progress是上传进度
    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            var percent = Math.round(event.loaded * 100 / event.total);
            console.log('%d%', percent);
            $("#upprog").text(percent);
        }
    };

    // 传输开始事件
    xhr.onloadstart = function(event) {
        console.log('load start');
        $("#upprog").text('开始上传');

        $("#stopbtn").one('click', function() {
            xhr.abort();
            $(this).hide();
        });

        loading(true);
    };

    // ajax过程成功完成事件
    xhr.onload = function(event) {
        console.log('load success');
        $("#upprog").text('上传成功');

        console.log(xhr.responseText);
        var ret = JSON.parse(xhr.responseText);
        addToFlist(ret.fname);
    };

    // ajax过程发生错误事件
    xhr.onerror = function(event) {
        console.log('error');
        $("#upprog").text('发生错误');
    };

    // ajax被取消
    xhr.onabort = function(event) {
        console.log('abort');
        $("#upprog").text('操作被取消');
    };

    // loadend传输结束，不管成功失败都会被触发
    xhr.onloadend = function (event) {
        console.log('load end');
        loading(false);
    };

    // 发起ajax请求传送数据
    xhr.open('POST', '/upload3', true);
    xhr.send(fd);
}

function addToFlist(fname) {
    var temp = ["<p id='" + fname + "'>",
                fname,
        "<button onclick='delFile(\"" + fname + "\");'>删除</button>",
                "</p>"
                ];
    $("#flist").append(temp.join(""));
}

function delFile(fname) {
    console.log('to delete file: ' + fname);
    // TODO: 请实现
}

function loading(showloading) {
    if (showloading) {
        $("#uptxt").show();
        $("#stopbtn").show();
    } else {
        $("#uptxt").hide();
        $("#stopbtn").hide();
    }
}

node.js


var express = require('express');
var router = express.Router();

var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();

var fs = require('fs');

router.all('/', function (req, res) {
    res.sendFile('../public/index.html');
});

router.post('/upload3', multipartMiddleware, function(req, res) {
    console.log(req.body);
    console.log(req.files);

    // 实际编程时，一般要将临时文件移动到目标位置，之后删除临时文件
    // 课程中为简化操作，直接将临时文件当成目标文件
    var fpath = req.files.myfile.path;
    var fname = fpath.substr(fpath.lastIndexOf('\\') + 1);

    res.json({fname: fname});
});

module.exports = router;