使用ajax上传图片和表单【ajax+Java后台】详解

最新推荐文章于 2024-04-20 03:39:57 发布

咸康康

最新推荐文章于 2024-04-20 03:39:57 发布

阅读量3.4k

点赞数 3

分类专栏：前端 springboot 文章标签： ajax 上传图片异步头像修改头像

本文链接：https://blog.csdn.net/weixin_42886104/article/details/89489550

版权

最近有个需求，修改用户个人信息，效果如下；

流程说明：

用户点击修改后，弹出文件夹，选择图片并预览，点击确认修改后，上传图片，完成修改后给出提示“修改成功”

HTML（这里用到了两个UI框架：layui和semantic ui，模板引擎使用的是：thymeleaf，以上只是对样式的影响，只有上传成功后的弹窗使用了layui）

    <link rel="stylesheet" type="text/css" href="../css/semantic.min.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
    <script type="text/javascript" src="../layui/layui.all.js" media="all"></script>

<body>
<!-- 顶部title -->
<div class="top_title back_top">
    <!-- 返回和搜索 -->
    <a href="javascript:history.go(-1)" style="color:white"><i class="angle large left icon"></i></a>
    个人信息
    <p style="width:15px"></p>
</div>

<div id="main" style="padding: 20px 30px">
    <!--<form method="POST" enctype="multipart/form-data">-->
        <div class="ui list">
            <div class="item">
                <div c

最低0.47元/天解锁文章

咸康康

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
使用ajax上传图片和表单【ajax+Java后台】详解

最近有个需求，修改用户个人信息，效果如下；流程说明：用户点击修改后，弹出文件夹，选择图片并预览，点击确认修改后，上传图片，完成修改后给出提示“修改成功”HTML（这里用到了两个UI框架：layui和semantic ui，模板引擎使用的是：thymeleaf，以上只是对样式的影响，只有上传成功后的弹窗使用了layui） <link rel="sty...
复制链接

扫一扫