JavaScript中三种异步上传文件方式

2023年5月27日上午7:04 • JavaScript

JavaScript中上传文件时，为了避免页面的阻塞，一般都使用了异步上传的方式。简单来说，异步上传文件就是将文件通过 AJAX 方式发送给服务器，实现文件的上传。下文将详细讲解JavaScript中三种异步上传文件方式的攻略。

FormData

使用FormData上传文件，可以将form表单中的所有元素的值（input，textarea，select）通过键值对的方式放入到formData对象中，然后通过AJAX的方式上传数据。在HTML5中，引入了FormData，方便我们处理表单的数据，并可以用于异步文件上传。

以下是一个上传单张图片并返回结果的示例：

<form method="post" enctype="multipart/form-data" >
    <label>选择上传的图片:</label>
    <input type="file" name="file" id="file" />
    <input type="button" value="上传" onclick="uploadFile()" />
</form>
<script>
function uploadFile() {
    var formData = new FormData();
    formData.append('file',document.getElementById('file').files[0]);
    var xhr = new XMLHttpRequest();
    xhr.open("POST","",true);
    xhr.send(formData);
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200){
            console.log(xhr.responseText);
        }
    };
}
</script>

FileReader

使用FileReader对象，可以在客户端读取文件内容，再将文件内容发送给服务器。FileReader支持二进制和文本文件的读取，在读取文件完成后回调onload事件。

以下是一个使用FileReader上传多张图片的示例：

<html>
<head>
<meta charset="utf-8">
<title>使用FileReader上传图片</title>
</head>
<body>
    <form method="post" enctype="multipart/form-data">
        <label>选择上传的图片:</label>
        <input type="file" name="file" id="file" multiple="multiple" />
        <input type="button" value="上传" onclick="uploadFiles()" />
    </form>
    <script>
    function uploadFiles() {
        var files = document.getElementById('file').files;
        if (files.length === 0) {
            return;
        }
        var xhr = new XMLHttpRequest();
        xhr.open('POST', "", true);
        var formData = new FormData();
        for (var i = 0; i < files.length; i++) {
            formData.append('files', files[i]);
        }
        xhr.onload = function () {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
            }
        };
        xhr.send(formData);
    }
    </script>
</body>
</html>

jQuery Form插件

jQuery Form插件是一个好用的ajax表单处理插件，它可以使表单的提交变得更加方便，特别是在上传文件时，它可以自动构建FormData对象，并且可以处理ajax回调函数。

以下是一个使用jQuery Form插件上传文件的示例：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>使用jQuery Form上传图片</title>
</head>
<body>
    <form method="post" enctype="multipart/form-data" id="uploadForm">
        <label>选择上传的图片:</label>
        <input type="file" name="file" id="file" />
        <input type="submit" value="上传" id="uploadBtn" />
    </form>
    <script>
        $(function(){
            $('#uploadForm').ajaxForm({
                beforeSubmit: function() {
                    console.log('start to submit');
                },
                success:function(data) {
                    console.log(data);
                },
                error:function() {
                    console.log('error');
                },
                dataType:  'text'
            });
        });
    </script>
</body>
</html>

以上就是关于JavaScript中三种异步上传文件方式的完整攻略，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript中三种异步上传文件方式 - Python技术站