极简ajax上传功能

最新推荐文章于 2023-11-23 11:30:00 发布

微雨曳荷

最新推荐文章于 2023-11-23 11:30:00 发布

阅读量121

点赞数

分类专栏：后端开发文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/weixin_44226805/article/details/124712312

版权

后端开发专栏收录该内容

6 篇文章 1 订阅

订阅专栏

用于记忆，防止再找

<!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: "http://127.0.0.1:5000/upload",
                type: "post",
                data: formData,
                cache: false,//上传文件无需缓存
                processData: false,//用于对data参数进行序列化处理 这里必须false，重点不能忘
                contentType: false,
                success: function(data) {
                    if(data.code==200){
                        console.log('上传成功！')
                          console.log(JSON.stringify(data))
                    }
                    
                },
                error: function(data) {

                }
            });
        }
    </script>
</html>

微雨曳荷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
极简ajax上传功能

用于记忆，防止再找<!DOCTYPE HTML><html xmlns:th="http://www.thymeleaf.org"> <head> <title>jQuery+ajax实现简单的上传图片功能</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <met.
复制链接

扫一扫