jQuery+ajax实现简单的上传图片功能

太过爱你忘了你带给我的痛 2022-12-18 15:49 232阅读 0赞

在前面的文章里面有写到，用vue上传图片的功能，vue-element-admin上传图片的功能：[https://www.jianshu.com/p/383e1f2f4276][https_www.jianshu.com_p_383e1f2f4276]，那如果是在jQuery里面，图片上传要怎么写？今天记录一个jQuery+ajax实现简单的上传图片功能。

思路很简单，和上面的差不多，前端以post的形式传递二进制图片文件给到后端，后端接收成功之后，同样返回一个字符串类型的url图片路径。

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
        <head>
            <title>jQuery+ajax实现简单的上传图片功能</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        </head>
        <body>
            <div class="form-group">
                <label>图片</label>
                <img src="" alt="" id="img" />
                <input type="file" name="file" id="uploadImage" onchange="postData()">
            </div>
        </body>
        <script type="text/javascript">
            function postData() {
                var formData = new FormData();
                formData.append("file", $("#uploadImage")[0].files[0]);
                $.ajax({
                    url: basePath + "/upload.action",
                    type: "post",
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    dataType: 'text',
                    success: function(data) {
                        var params = JSON.parse(data)
                        $("#img").attr("src", params);
                    },
                    error: function(data) {
                        
                    }
                });
            }
            //赋值变量
            var basePath = getContextPath();
            // 获取项目路径
            function getContextPath() {
                var pathName = window.document.location.pathname;
                var projectName = pathName.substring(0, pathName.substr(1).indexOf(
                    '/') + 1);
                return projectName;
            }
        </script>
    </html>

发送请求之后，可以在network里面看到具体的请求以及参数。  
这里了可以看到Form data的文件格式，二进制binary文件

![format_png][]

在看一眼返回值：  
额，这里我们的后端比较省事，简单粗暴的，直接的，赤裸裸的给了个字符串，嗯，，也行吧。

![format_png 1][]

效果是这个样子的（我这里没有给默认的图片，可以添加一下默认的图片~）  
在点击选择文件按钮的时候，会打开本地的文件夹选择一张图片，点击打开的时候，会触发onchange绑定的函数，发起请求。接收到返回值之后，再讲返回值渲染到页面上。

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWIxOGQ5MDRiYzVhMmQ0ZDIuZ2lm][]

注意：

如果接口存在问题的话，要用postman测试一下  
postman测试上传图片接口步骤如下:

1：新建一个窗口  
将接口地址和请求方式填写一下

![format_png 2][]

2:选择Body，选择form-data，选择File

![format_png 3][]

3:在KEY里面填写一下，file，不填写会出错，然后VALUE会出现选择本地图片的选项。

![format_png 4][]

4：选择完本地图片之后，点击send发送  
一般到这步就能看到返回值了

![format_png 5][]

[https_www.jianshu.com_p_383e1f2f4276]: https://www.jianshu.com/p/383e1f2f4276
[format_png]: /images/20221122/5d0733a58dee429abc6550cb1cb00095.png
[format_png 1]: /images/20221122/9e5da2550a994ed7bfd16610157aa424.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWIxOGQ5MDRiYzVhMmQ0ZDIuZ2lm]: /images/20221122/7ed0ff8415ec4baaabbecee8416dd30e.png
[format_png 2]: /images/20221122/41b993221f6f4949bdaf0bf2b74dedd1.png
[format_png 3]: /images/20221122/446a80f7d4154e4c8e9e677062a48f7e.png
[format_png 4]: /images/20221122/c9a644818ac54cf09c050cbb7aed6d1f.png
[format_png 5]: /images/20221122/b6b8d533ffac4403b9dea45386cbfc06.png