ajaxSubmit 实现图片上传 SSM maven

拼搏现实的明天。 2023-08-17 17:00 128阅读 0赞

文件上传依赖：

<dependency>
                <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
                <version>${commons-fileupload.version}</version>
            </dependency>
    
            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>2.6</version>
            </dependency>

在springmvc配置文件中增加解析器：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <property name="defaultEncoding" value="UTF-8"></property>
            <property name="maxUploadSize" value="10485760"></property>
        </bean>

引入JS----jquery.form.js

<script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jquery-1.11.3.min.js"></script>
        
        <script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jqueryExt.js"></script>
        
        <script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jquery.form.js"></script>

页面表单设置：

<form class="form-horizontal"   id="form1" enctype="multipart/form-data">
    
    
                        <div class="row clearfix">
                            <div class="form-group">
                                <label  class="col-sm-1 control-label">编号:</label>
                                <div class="col-md-2 column">
                                    
                                    <input type="hidden" id="Staff_ID" class="form-control" name="Staff_ID" placeholder="请输入">
                                    <input type="text" id="Staff_No"   class="form-control" readonly   name="Staff_No" placeholder="">
                                </div>
    
                                <label class="col-sm-1 control-label">工号:</label>
                                <div class="col-md-2 column">
                                    <input type="text" id="Staff_Code" οnblur="setStaffId()" class="form-control"  name="Staff_Code" placeholder="请输入工号">
                                </div>
    
                                <label  class="col-sm-1 control-label">姓名:</label>
                                <div class="col-md-2 column">
                                    <input type="text" id="Staff_Name" class="form-control"  name="Staff_Name" placeholder="请输入姓名" >
                                    <span class="required" id="sp1">*</span>
                                </div>
    
    
                            </div>
                        </div>
    
    
    
                        <div class="row clearfix">
                            <div class="form-group">
                                <label  class="col-sm-1 control-label">用户名:</label>
                                <div class="col-md-2 column">
                                    <input type="text" id="Staff_LoginName" class="form-control" name="Staff_LoginName" placeholder="请输入用户名">
                                    <span class="required" id="sp3">*</span>
                                </div>
                                <label class="col-sm-1 control-label">密码:</label>
                                <div class="col-md-2 column">
                                    <input type="password" id="Staff_Pass" class="form-control" name="Staff_Pass" placeholder="请输入密码">
                                </div>
                                <label  class="col-sm-1 control-label">职称:</label>
                                <div class="col-md-2 column">
                                    <input type="text" id="Staff_Title"  class="form-control" name="Staff_Title" placeholder="请输入职称">
                                    <span class="required" id="sp2">*</span>
                                </div>
                            </div>
                        </div>
    
                        <div class="row clearfix">
                            <div class="form-group">
                                <label  class="col-sm-1 control-label">级别:</label>
                                <div class="col-md-2 column">
                                    <input type="text" id="Staff_Level" class="form-control" name="Staff_Level" placeholder="请输入级别">
                                </div>
                                <label  class="col-sm-1 control-label">图片:</label>
                                <div class="col-md-3 column">
                                    <input type="file"   name="goodsImage"/>
                                </div>
                                <label  class="col-sm-1 control-label">状态:</label>
                                <div class="col-md-2 column">
                                    <select class="form-control" name="Staff_Enable">
                                        <option  value="1">启用</option>
                                        <option value="0">注销</option>
                                    </select>
                                </div>
    
                            </div>
                        </div>
    
    
                        <input type="button"    id="saveUploadOrUpdate" data-toggle='modal' data-target='#myModal' class="btn btn-primary" value="保存">
                    </form>

/* 上传文本图片和修改 */
        $(document).on("click","#saveUploadOrUpdate",function(){
            $("#form1").ajaxSubmit({
                url:"userss/saveUploadOrUpdate",
                type:"post",
                contentType:"application/x-www-form-urlencoded; charset=utf-8",
                dataType:"text",
                success:function(data){
                    alert(data);
                    queryUsers(1);
                }
            });
        });

控制器中实现文件上传：

/*添加内容上传图片和修改*/
        @RequestMapping("/saveUploadOrUpdate")
        public void saveTbGoods(@RequestParam("goodsImage") MultipartFile file,StaffInfo tb,HttpServletRequest request,HttpServletResponse response) throws IOException{
            System.out.println("文件："+file+"参数："+tb);
            response.setContentType("text/html;charset=utf-8");
            PrintWriter out=response.getWriter();
            String pathName=transfer(file, request);//调用上传文件transfer方法得到文件路径
            tb.setStaff_Pic(pathName);//添加set文件路径到数据库
            int i=userServices.saveOrUpdateStaffInfo(tb);
            if(i>0){
                out.print("添加成功!");//往前台打印text文本格式
            }else{
                out.print("添加失败!");
            }
        }
        /*上传文件*/
        private String transfer(MultipartFile file,HttpServletRequest request){
            //获取目标文件要存放的目录的绝对路径
            String path=request.getServletContext().getRealPath("/resouces/upload");
            String fileName=file.getOriginalFilename();//获取原始的文件名
            File tranFile=new File(path,fileName);//创建目标文件对象
            if(!tranFile.exists()){
        //如果目录不存在
                tranFile.mkdirs();//创建目录
            }
            try {
                file.transferTo(tranFile);//文件上传
            } catch (IllegalStateException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
    
            return request.getContextPath()+"/resouces/upload/"+fileName;
        }

如何显示：

tr+="<td><img style=' width:90px; height:60px;' src='"+obj.Staff_Pic+"'/></td>";

jsp代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" isELIgnored="false"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
        <base href="<%=basePath%>">
    
        <title>My JSP 'index.jsp' starting page</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        
        
        <link rel="stylesheet" type="text/css"
              href="${pageContext.request.contextPath}/resouces/js/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css"
              href="${pageContext.request.contextPath}/resouces/js/bootstrap/css/bootstrap-theme.min.css">
        <script src="${pageContext.request.contextPath}/resouces/js/jquery.min.js"></script>
        <script src="${pageContext.request.contextPath}/resouces/js/bootstrap/js/bootstrap.min.js"></script>
        
        <script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jquery-1.11.3.min.js"></script>
        
        <script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jqueryExt.js"></script>
        
        <script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jquery.form.js"></script>
    </head>
    
    <body>
    <table class="table table-hover">
        <thead >
        <tr class="success">
            <th>员工序号</th>
            <th>员工编号</th>
            <th>员工工号</th>
            <th>员工姓名</th>
            <th>用户名</th>
            <th>员工密码</th>
            <th>员工职称</th>
            <th>员工级别</th>
            <th>员工图片</th>
            <th>是否启用</th>
            <th colspan="3">查询
                <input type="text" οnblur="queryUsers()" size="7" class="goodsName" id="goodsNames" placeholder="请输入姓名" name="goodsName">
               <%-- <input type="text" οnblur="queryTbGoods()" size="6" class="goodsName" id="typeNames" placeholder="请输入类型" name="typeName">--%>
                <input type="button"  data-toggle="modal" data-target="#myModal"  class="emptys btn btn-default" value="添加">
            </th>
    
        </tr>
        </thead>
        <tbody id="tbody">
    
        </tbody>
    </table>
    
    
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="modalTitle1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width:760px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">
                        ×
                        
                    </button>
                    <h4 class="modal-title" id="modalTitle1">录入员工</h4>
                </div>
                <div class="modal-body">
    
                    
                    <form class="form-horizontal"   id="form1" enctype="multipart/form-data">
    
    
                        <div class="row clearfix">
                            <div class="form-group">
                                <label  class="col-sm-1 control-label">编号:</label>
                                <div class="col-md-2 column">
                                    
                                    <input type="hidden" id="Staff_ID" class="form-control" name="Staff_ID" placeholder="请输入">
                                    <input type="text" id="Staff_No"   class="form-control" readonly   name="Staff_No" placeholder="">
                                </div>
    
                                <label class="col-sm-1 control-label">工号:</label>
                                <div class="col-md-2 column">
                                    <input type="text" id="Staff_Code" οnblur="setStaffId()" class="form-control"  name="Staff_Code" placeholder="请输入工号">
                                </div>
    
                                <label  class="col-sm-1 control-label">姓名:</label>
                                <div class="col-md-2 column">
                                    <input type="text" id="Staff_Name" class="form-control"  name="Staff_Name" placeholder="请输入姓名" >
                                    <span class="required" id="sp1">*</span>
                                </div>
    
    
                            </div>
                        </div>
    
    
    
                        <div class="row clearfix">
                            <div class="form-group">
                                <label  class="col-sm-1 control-label">用户名:</label>
                                <div class="col-md-2 column">
                                    <input type="text" id="Staff_LoginName" class="form-control" name="Staff_LoginName" placeholder="请输入用户名">
                                    <span class="required" id="sp3">*</span>
                                </div>
                                <label class="col-sm-1 control-label">密码:</label>
                                <div class="col-md-2 column">
                                    <input type="password" id="Staff_Pass" class="form-control" name="Staff_Pass" placeholder="请输入密码">
                                </div>
                                <label  class="col-sm-1 control-label">职称:</label>
                                <div class="col-md-2 column">
                                    <input type="text" id="Staff_Title"  class="form-control" name="Staff_Title" placeholder="请输入职称">
                                    <span class="required" id="sp2">*</span>
                                </div>
                            </div>
                        </div>
    
                        <div class="row clearfix">
                            <div class="form-group">
                                <label  class="col-sm-1 control-label">级别:</label>
                                <div class="col-md-2 column">
                                    <input type="text" id="Staff_Level" class="form-control" name="Staff_Level" placeholder="请输入级别">
                                </div>
                                <label  class="col-sm-1 control-label">图片:</label>
                                <div class="col-md-3 column">
                                    <input type="file"   name="goodsImage"/>
                                </div>
                                <label  class="col-sm-1 control-label">状态:</label>
                                <div class="col-md-2 column">
                                    <select class="form-control" name="Staff_Enable">
                                        <option  value="1">启用</option>
                                        <option value="0">注销</option>
                                    </select>
                                </div>
    
                            </div>
                        </div>
    
    
                        <input type="button"    id="saveUploadOrUpdate" data-toggle='modal' data-target='#myModal' class="btn btn-primary" value="保存">
                    </form>
    
                </div>
                <div class="modal-footer">
    
                    <button type="button"  class="up btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div>
            
        </div>
        
    </div>
    <ul class="pager" >
        <li>
            当前页:<span id="curPage"></span>总页数:<span id="totalPages"></span>总共:<span id="totals"></span>条记录
        </li>
        <li><a  id="first" οnclick="changePage(this)">首页</a></li>
        <li><a  id="prev" οnclick="changePage(this)">上一页</a></li>
        <li><a  id="next" οnclick="changePage(this)">下一页</a></li>
        <li><a  id="last"  οnclick="changePage(this)">尾页</a></li>
        <li><input type="number"  id="txtCurPage"   min="1" max="10"></input><input type="button" class="btn btn-default" value="go" οnclick="gotoPage()"/></li>
    </ul>
    </body>
    </html>
    <script>
        $(function(){
            queryUsers(1);
            queryTbGoodsType();
        });
        /* 查询商品表 */
        function queryUsers(page){
    
            var name=$("#goodsNames").val();
             // alert(name+":参数:");
            $.ajax({
                url:"userss/queueUsers",
                type:"post",
                data:{
         "staffName":name,"pageNum":page,"pageSize":3},
                dataType:"json",
                success:function(data){
                    //alert(data.pages);
                    $("#tbody").empty();
    
                    $.each(data.list,function(key,obj){
                         // alert(obj.Staff_Pic);
                        var tr="<tr>";
                        tr+="<td>"+obj.Staff_ID+"</td>";
                        tr+="<td>"+obj.Staff_No+"</td>";
                        tr+="<td>"+obj.Staff_Code+"</td>";
                        tr+="<td>"+obj.Staff_Name+"</td>";
                        tr+="<td>"+obj.Staff_LoginName+"</td>";
                        tr+="<td>"+obj.Staff_Pass+"</td>";
                        tr+="<td>"+obj.Staff_Title+"</td>";
                        tr+="<td>"+obj.Staff_Level+"</td>";
                        tr+="<td><img style=' width:90px; height:60px;' src='"+obj.Staff_Pic+"'/></td>";
                        if(obj.Staff_Enable=='1'){
                            tr+="<td>启用</td>";
                        }else{
                            tr+="<td>"+obj.Staff_Enable+"</td>";
                        }
                        tr+="<td><input type='button'  id="+obj.Staff_ID+" data-toggle='modal' data-target='#myModal' title="+obj.Staff_ID+"  class='findById btn btn-default' value='修改'></td>";
                        tr+="<td><input type='button' id="+obj.Staff_ID+"  class='delete btn btn-default' value='删除'></td>";
                        tr+="</tr>";
                        $("#tbody").append(tr);
    
                        //重新初始化分页链接
                        $("#curPage").html(data.pageNum);//当前页
                        $("#totalPages").html(data.pages);//总页数
                        $("#totals").html(data.total);//总条数
                        $("#first").attr("data",1);//首页
                        $("#prev").attr("data",data.prePage);//上一页
                        $("#next").attr("data",data.nextPage);//下一页
                        $("#last").attr("data",data.pages);//尾页
                        $("#txtCurPage").val(data.pageNum).attr("max",data.pages);
                    });
                }
            });
        }
        //改变页面
        function changePage(obj){
            var page=$(obj).attr("data");//取出data属性值
            queryUsers(page);
        }
        //跳转到指定页面
        function gotoPage(page){
            var page=$("#txtCurPage").val();
            queryUsers(page);
        }
        /*查询商品类型  */
        function queryTbGoodsType(){
            $.ajax({
                url:"goods/queryTbGoodsType",
                type:"post",
                data:"",
                dataType:"json",
                success:function(data){
                    for(var i=0;i<data.length;i++){
                        var obj=data[i];
                        $(".sele").append("<option value='"+obj.typeId+"'>"+obj.typeName+"</option>");
                    }
                }
            });
        }
        /* 添加修改之前清空form表单 */
        $(document).on("click",".emptys",function(){
            $("#Staff_ID").val("");
            $("#Staff_No").val("");
            $("#Staff_Code").val("");
            $("#Staff_Name").val("");
            $("#Staff_LoginName").val("");
            $("#Staff_Pass").val("");
            $("#Staff_Title").val("");
            $("#Staff_Level").val("");
            $("#Staff_Pic").val("");
            $("#Staff_Enable").val("");
        });
        /*添加修改  */
        /*$(document).on("click","#saveUploadOrUpdate",function(){
             //alert($("#form1").serialize());
            $.ajax({
                url:"users/saveUploadOrUpdate",
                type:"post",
                data:$("#form1").serialize(),
                dataType:"text",
                success:function(data){
                    alert(data);
                    queryUsers();
                }
            });
        });*/
    
    
        /* 上传文本图片和修改 */
        $(document).on("click","#saveUploadOrUpdate",function(){
            $("#form1").ajaxSubmit({
                url:"userss/saveUploadOrUpdate",
                type:"post",
                contentType:"application/x-www-form-urlencoded; charset=utf-8",
                dataType:"text",
                success:function(data){
                    alert(data);
    queryUsers($("#curPage").html());//刷新当前页面
    //changePage(last);//添加刷新指向尾页
    
                }
            });
        });
        /*修改前查询  */
        $(document).on("click",".findById",function(){
            var id=this.id;
            $.ajax({
                url:"userss/queueById",
                type:"post",
                data:{
         "staffId":id},
                dataType:"json",
                success:function(data){
                    $("#Staff_ID").val(data.Staff_ID);
                    $("#Staff_No").val(data.Staff_No);
                    $("#Staff_Code").val(data.Staff_Code);
                    $("#Staff_Name").val(data.Staff_Name);
                    $("#Staff_LoginName").val(data.Staff_LoginName);
                    $("#Staff_Pass").val(data.Staff_Pass);
                    $("#Staff_Title").val(data.Staff_Title);
                    $("#Staff_Level").val(data.Staff_Level);
                    $("#Staff_Pic").val(data.Staff_Pic);
                    $("#Staff_Enable").val(data.Staff_Enable);
                }
            });
        });
        $(document).on("click",".delete",function(){
            var id=this.id;
            if (confirm("您确定要删除此信息吗？")){
                $.ajax({
                    url:"userss/deleteGoods",
                    type:"post",
                    data:{
         "goodsId":id},
                    dataType:"text",
                    success:function(data){
                        alert(data);
                        queryUsers($("#curPage").html());//刷新当前页面
                    }
                });
            }else{
                return false;
            }
        });
    
    
        /*失去焦点*/
        function setStaffId(){
            var Id=$("#Staff_Code").val();
            $("#Staff_No").val(Id);
    
        }
    
    </script>

转载于:https://www.cnblogs.com/kkxwze/p/11423954.html