jquery ajax上传文件

最新推荐文章于 2024-07-15 15:38:12 发布

机械熊猫侠

最新推荐文章于 2024-07-15 15:38:12 发布

阅读量371

点赞数

本文链接：https://blog.csdn.net/qq_39768738/article/details/103452363

版权

一、jQuery ajax

1、 dataType(xml、html、script、json、jsonp、text)：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。
什么是MIME类型？把输出结果传送到浏览器上的时候，浏览器必须启动适当的应用程序来处理这个输出文档。默认值为contentType = "application/x-www-form-urlencoded"

2、formData.append("xxx"，"xxxx")；异步发送这个数据的时候必须设置processData:false。contentType:"application/json"必须是json数据, 注意name:"xxx"不是json串, 所以不可以设置contentType, 默认即可。form域中如果没有 type=file的控件，用默认的 application/x-www-form-urlencoded 就可以了。但是如果有 type=file 的话，就要用到 multipart/form-data 了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file)、Content-Type(默认为text/plain)、name(控件name)等信息，并加上分割符(boundary)。

3、表单提交内容的编码类型由属性enctype决定。它可以有以下三个值
1）application/x-www-form-urlencoded：窗体数据被编码为名称/值对。它是post的默认格式，使用js中URLencode转码方法。包括将name、value中的空格替换为加号、将非ascii字符做百分号编码、将input的name、value用'='连接，不同的input之间用'&'连接。当post请求时，浏览器把form数据封装到http body中。
2）multipart/form-data：窗体数据被编码为一条消息，form域中的每个控件对应消息中的一个部分。（multipart/form-data将表单中的每个input转为了一个由boundary分割的小格式，不转码，直接将utf8字节拼接到请求体中。在本地有多少字节实际就发送多少字节，极大提高了效率，适合传输长字节。）
3）text/plain ：窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <style>
        .progress {
            width: 600px;
            height: 10px;
            border: 1px solid #ccc;
            border-radius: 10px;
            margin: 10px 0px;
            overflow: hidden;
        }

        /* 初始状态设置进度条宽度为0px */
        .progress>div {
            width: 0px;
            height: 100%;
            background-color: yellowgreen;
            transition: all .3s ease;
        }
    </style>
</head>

<body>
    <input type="file" id="upload-file">
    <div class="progress">
        <div></div>
    </div>
    <button onclick="">上传</button>
</body>

<script>
    function uploadFile() {
        // 获取上传的文件
        var uploadFile = $('#upload-file').get(0).file[0];
        // 实例化一个表单数据对象
        var formdata = new FormData();
        formdata.append('fileInfo', uploadFile);
        $.ajax({
            url: '/uploadfileurl',
            type: 'post',
            // 这里要设置异步上传，才能成功调用xhr.upload.addEventListener('progress',function(e){}), progress回掉函数
            async: true,
            data: formdata,
            // 接收数据类型
            dataType: 'json',
            // 对数据进行序列化
            // 把 { width:1680, height:1050 } 参数对象序列化为 width=1680&height=1050 这样的字符串。
            processData: false,
            // 发送数据编码类型
            // 在 form标签(有enctype属性)中设置了enctype(enctype就是encodetype就是编码类型的意思) = "multipart/form-data"
            //(指表单数据有多部分构成，既有文本数据，又有文件等二进制数据),
            //这样请求中的 contentType 就会默认为 multipart/form-data 。
            //这里设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。
            contentType: false,
            xhr: function () {
                var xhr = new XMLHttpRequest();
                // 使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                xhr.upload.addEventListener('progress', function (e) {
                    console.log(e);
                    // loaded代表上传了多少
                    // total代表总数为多少
                    var progressRate = (e.loaded / e.total) * 100 + '%';
                    // 通过设置进度条的宽度达到效果
                    $('.progress > div').css('width', progressRate);
                })
                return xhr;
            },
            success: function (data) {
                
            },
            error: function (e) {
                console.log(e);
            }
        })
    }
</script>

</html>

二、springMVC @RequestMapping

1、RequestMapping注解有六个属性。

1）value， method
value：指定请求的实际地址，指定的地址可以是URI Template 模式。（a、可以指定为普通的具体值；b、可以指定为含有某变量的一类值；c、可以指定为含正则表达式的一类值。）

method：指定请求的method类型， GET、POST、PUT、DELETE等。

2）consumes，produces
consumes：指定处理请求的提交内容类型（Content-Type），例如application/json、text/html。
produces: 指定返回的内容类型，仅当request请求头中的(Accept)类型中包含该指定类型才返回。

3）params，headers
params：指定request中必须包含某些参数值时，才让该方法处理。
headers：指定request中必须包含某些指定的header值，才能让该方法处理请求。