jq实现前端文件上传

FormData

FormData是XMLHttpRequest Level 2 新增的一个接口。

使用FormData可以实现各种文件上传。

使用

// 创建FormData的实例

var formdata = new FormData();

// 用append()为实例添加键和值

formdata.append(键名, 键值);

注意

使用jq的$.ajax()方法来进行文件上传时，需要设置contentType和processData两个参数。

参数

类型

说明

contentType

String

当发送信息至服务器时，内容编码类型默认为“application/x-www-form-urlencoded”。

该默认值适合大多数应用场合。

processData

Boolean

默认为true。

默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型“application/x-www-form-urlencoded”。

如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

从上面两个参数的说明可以看出，ajax发送数据的时候内容编码类型是“application/x-www-form-urlencoded”，

而我们上传的文件可能是其他类型，所以上传的时候不设置内容类型，故 contentType: false，

不对数据做处理，故 processData: false 。

实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>jq实现前端文件上传</title>

</head>

<body>

    <input id="file" type="file">

    <button id="btn">上传</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>

    $('#btn').click(function() {

        var formdata = new FormData();

        formdata.append("file", $('#file')[0].files[0]);

        $.ajax({

            type: "POST",

            url: "你要将文件上传到的地址",

            data: formdata,

            contentType: false, // 不设置内容类型

            processData: false, // 不处理数据

            dataType: "json",

            success: function(data) {

                // 请求成功后要执行的代码

            },

            error: function(data) {

                // 请求失败后要执行的代码

            }

        });

    });

    </script>

</body>

</html>

观察

console.log($('#file')[0]);

console.log($('#file')[0].files[0]);

从上面的打印结果可以看到我们传的文件类型是“application/octet-stream”。

请求时的参数：

请求后的结果：

巴特西

jq实现前端文件上传

最新文章

热门文章