jquery使用FormData实现异步上传文件

以下是关于“jquery使用FormData实现异步上传文件”的完整攻略：

什么是FormData

FormData是一个表单数据对象，可以收集表单数据，包括文件类型的数据，并通过Ajax请求发送到服务器。它形成了HTML5的一个新特性，可以方便地实现异步上传文件。

如何使用FormData

在JavaScript中创建FormData实例
js var formData = new FormData();
通过append方法添加数据
js formData.append('name', 'value'); //添加普通字段 formData.append('file', file); //添加文件类型字段
发送FormData到服务器
js $.ajax({ url: '/upload', type: 'POST', data: formData, processData: false, contentType: false, success: function (response) { console.log(response); } });
processData选项：默认情况下，jquery会将FormData对象序列化为字符串，这里设置为false可以避免这个问题。
contentType选项：也为了避免序列化问题，这里设置为false，由浏览器来决定文档类型。

示例一：上传单个文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>单个文件上传示例</title>
</head>
<body>
    <form id="form">
        <input type="file" name="file"/>
        <button type="submit">上传</button>
    </form>
    <div id="result"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#form').submit(function (event) {
                event.preventDefault(); //阻止表单提交事件的默认行为（刷新页面）
                var formData = new FormData();
                var file = $('input[name="file"]')[0].files[0]; //获取文件对象
                formData.append('file', file); //添加文件到formData
                $.ajax({
                    url: '/upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        $('#result').html(response);
                    }
                });
            });
        });
    </script>
</body>
</html>

这是一个典型的表单，其中包含一个文件输入框和一个上传按钮，当点击上传按钮时，表单会通过Ajax方式发送到服务器，服务器接收到表单的数据并保存文件，最后返回一个文本信息到客户端。

需要注意，在处理文件上传时，必须将processData和contentType选项都设置为false。

示例二：上传多个文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多文件上传示例</title>
</head>
<body>
    <form id="form">
        <input type="file" name="files[]" multiple="multiple"/>
        <button type="submit">上传</button>
    </form>
    <div id="result"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#form').submit(function (event) {
                event.preventDefault(); //阻止表单提交事件的默认行为（刷新页面）
                var formData = new FormData();
                var files = $('input[name="files[]"]')[0].files; //获取文件对象组
                //循环添加文件
                for (var i = 0; i < files.length; i++) {
                    formData.append('files[]', files[i]);
                }
                $.ajax({
                    url: '/upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        $('#result').html(response);
                    }
                });
            });
        });
    </script>
</body>
</html>

这是一个包含多个文件上传的表单，其中通过multiple属性设置文件输入框可以选择多个文件，其余部分与示例一相同。需要注意的是，上传多个文件时，要循环添加文件到FormData对象中。

以上是关于“jquery使用FormData实现异步上传文件”的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery使用FormData实现异步上传文件 - Python技术站

jquery使用FormData实现异步上传文件

什么是FormData

如何使用FormData

示例一：上传单个文件

示例二：上传多个文件

相关文章