SpringBoot会员管理系统之处理文件上传功能-创新互联

温馨提示

创新互联是一家集网站建设,茫崖企业网站建设,茫崖品牌网站建设,网站定制,茫崖网站建设报价,网络营销,网络优化,茫崖网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

Spring Boot会员管理系统的中，需要涉及到Spring框架，SpringMVC框架，Hibernate框架，thymeleaf模板引擎。所以，可以学习下这些知识。当然，直接入门的话使用是没问题，但是，涉及到一些异常和原理的话可能就有些困难。

1. 前端部分

在前端部分addMember.html是通过form表单来提交会员的信息，其中就包括了图片上传功能（这里涉及了文件上传操作），表单部分代码如下：

<form th:action="@{/admin/addMember}" method="post" enctype="multipart/form-data" id="addMember">
              <div class="file-field input-field">
                <div class="btn">
                  <span>选择头像文件</span>
                  <input id="file" type="file" name="iconPath" multiple="" placeholder="选择文件" accept="image/*" onchange="changeToop()">
                </div>
                <div class="file-path-wrapper">
                  <!--<input class="file-path validate" type="text" placeholder="Upload one or more files">-->
                  <img id="myimg" src="assets/iconPath/common.jpg" class="img-responsive img-thumbnail"  />
                </div>
                <!--头像文件上传预览-->
                <script>
                  function Id(id){
                    return document.getElementById(id);
                  }
                  function changeToop(){
                    var file = Id("file");
                    if(file.value===''){
                      //设置默认图片
                      Id("myimg").src='assets/iconPath/common.jpg';
                    }else{
                      preImg("file","myimg");
                    }
                  }
                  //获取input[file]图片的url Important
                  function getFileUrl(fileId) {
                    var url;
                    var file = Id(fileId);
                    var agent = navigator.userAgent;
                    if (agent.indexOf("MSIE")>=1) {
                      url = file.value;
                    } else if(agent.indexOf("Firefox")>0) {
                      url = window.URL.createObjectURL(file.files.item(0));
                    } else if(agent.indexOf("Chrome")>0) {
                      url = window.URL.createObjectURL(file.files.item(0));
                    }
                    return url;
                  }
                  //读取图片后预览
                  function preImg(fileId,imgId) {
                    var imgPre =Id(imgId);
                    imgPre.src = getFileUrl(fileId);
                  }
                </script>
              </div>
              
              .......
              
            </form>

本文名称：SpringBoot会员管理系统之处理文件上传功能-创新互联
本文来源：https://www.cdcxhl.com/article30/dcgspo.html

成都网站建设公司_创新互联，为您提供网页设计公司、自适应网站、关键词优化、网站设计公司、外贸网站建设、软件开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联