Ajax批量上传文件Demo

Kinber_XD

已于 2023-02-23 13:56:29 修改

阅读量612

点赞数 1

分类专栏：随手记关于前端 HTML 文章标签： ajax javascript 前端

于 2022-05-24 11:30:48 首次发布

本文链接：https://blog.csdn.net/Kinber_XD/article/details/124943700

版权

随手记同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

关于前端

3 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

注意：以下代码为了判断多个文件是否全部上传成功，使用的是同步上传，非异步上传。如果想要使用异步上传，将async设置为true即可，但这样也会导致无法判断所有文件均已上传成功，请斟酌修改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试ajax同步批量上传文件</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form method="post" enctype="multipart/form-data" onsubmit="return false">
    <input id="fileInput" type="file" name="fileInput" multiple="multiple">
    <input id="uploadBtn" type="button" value="提交" onclick="ajaxFileUpload()" />
</form>

<script type="text/javascript">
    function ajaxFileUpload() {
        debugger
        var files = document.getElementById("fileInput").files;
        for (var filesKey in files) {
            var file = files[filesKey];
            if(file instanceof File){
                var formData = new FormData();
                formData.append("file"+filesKey, file);
                ajaxUpload(formData);
            }
        }
        console.log("所有文件均已上传完毕.")
        return false;
    }

    function ajaxUpload(formData) {
        $.ajax({
            /** 这里改成自己的上传接口 */
            url: "http://localhost:8088/r/uf",
            type: "POST",
            data: formData,
            /** 必须false才会自动加上正确的  Content-Type */
            contentType: false,
            /** 必须false才会避开jQuery对 formdata 的默认处理 * XMLHttpRequest会对 formdata 进行正确的处理 */
            processData: false,
            async: false,
            cache: false,
            dataType: "json",
            success: function (data) {
                console.log(data);
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("上传失败！");
            }
        });
    }
</script>
</body>
</html>