ajaxSubmit 实现图片上传 SSM maven

その他 2019-08-28 19:32:28 訪問数: null

文件上传依赖：

 <!-- 文件上传组件 -->
        <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配置文件中增加解析器：

<！ - SpringMvc文件上传时、需要配置MultipartResolver处理器- > 
    <豆ID = "multipartResolver" クラス = "org.springframework.web.multipart.commons.CommonsMultipartResolver"> 
        <プロパティ名= "defaultEncoding"値=」 UTF-8 "> </ property>の
        <プロパティ名=" maxUploadSize」値= "10485760"> </ property>の
    </豆>

----導入JS jquery.form.js

<!--最基础jQuery.js都是基于这个  -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jquery-1.11.3.min.js"></script>
    <!-- 异步转换参数js -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jqueryExt.js"></script>
    <!-- 上传文件js -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jquery.form.js"></script>

页面表单设置：

<！ -フォーム提交表单- > 
                <フォームのクラス = "フォーム水平" idが= "Form1の"のenctype = "マルチパート/フォームデータ"> 


                    <DIV クラス = "行clearfix"> 
                        <DIV クラス = "フォーム-グループ"> 
                            <ラベル   クラス =" COL-SM-1コントロールラベル">编号：</ label>は
                            <divのクラス =" COL-MD-2列"> 
                                <！ -编号- > 
                                の<input type ="隠された」ID = 『Staff_ID』クラス = 『フォームコントロール』NAME = "Staff_ID"プレースホルダ= "请输入"> 
                                の<input type = "テキスト" 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" onblur="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();
        }

        戻る request.getContextPath（）+ "/ resouces /アップロード/" + ファイル名; 
    }

どのように表示するには：

TR + = "<TD> <IMGスタイル= '幅：90PX;高さ：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="styles.css">
    -->
    <!-- 使用模态窗口引入bootstrap -->
    <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>
    <!--最基础jQuery.js都是基于这个  -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jquery-1.11.3.min.js"></script>
    <!-- 异步转换参数js -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/resouces/jqueryExt.js"></script>
    <!-- 上传文件js -->
    <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 COLSPAN = "3"> クエリ
             <タイプの入力= "テキスト"のonblur = "queryUsers（）"サイズ= "7" クラス = "goodsName"は、上記のid = "goodsNamesは、"プレースホルダ= "あなたの名前を入力してください"を述べました=名"goodsName"> 
           <％ -の<input type = "text"のonblur = "queryTbGoods（）"サイズ= "6" クラス = "goodsName" ID = "型名"プレースホルダ= "を入力してくださいタイプ" NAME ="型名「> - ％>
            <INPUT TYPE = "ボタン"データトグル= "モーダル"データターゲット= "＃myModal"   クラス = "emptys BTN BTNデフォルト"値= "添加"> 
        </番目> 

    </ 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">
                    &times;
                    <!-- 关闭按钮 -->
                </button>
                <h4 class="modal-title" id="modalTitle1">录入员工</h4>
            </div>
            <div class="modal-body">

                <!--form提交表单  -->
                <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" onblur="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コントロールラベル">级别</ label>は
                            <DIV クラス = "COL-MD-2カラム"> 
                                の<input type = "テキスト" ID = "Staff_Level" クラス = "フォームコントロール" = "Staff_Level"プレースホルダ= "请输入级别">名前
                            </ div> 
                            <ラベル   クラス = "COL-SM-1コントロールラベル">图片</ label>は
                            <DIV クラス = "COL-MD-3カラム" > 
                                の<input type = "ファイル"名= "goodsImage" /> 
                            </ div>
                            <ラベル   クラス = "COL-SM-1コントロールラベル">状态：</ 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>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
<ul class="pager" >
    <li>
        当前页:<span id="curPage"></span>总页数:<span id="totalPages"></span>总共:<span id="totals"></span>条记录
    </li>
    <li><a  id="first" onclick="changePage(this)">首页</a></li>
    <li><a  id="prev" onclick="changePage(this)">上一页</a></li>
    <li><a  id="next" onclick="changePage(this)">下一页</a></li>
    <li><a  id="last"  onclick="changePage(this)">尾页</a></li>
    <li><input type="number"  id="txtCurPage"   min="1" max="10"></input><input type="button" class="btn btn-default" value="go" onclick="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"：名、 "PAGENUM"ページ、 "pageSizeを"：3 }、
            データ型： "JSON" 、
            成功：関数（データ）{ 
                // 警告（data.pages）。
                $（ "＃のTBODY" ）.empty（）; 

                $ .each（data.list、機能（キー、OBJ）{ 
                     // 警告（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_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");//データを削除value属性
        queryUsers（ページ）; 
    } 
    // 指定されたページへのジャンプ
    機能gotoPage（ページ）{ 
        VARページ = $（ "＃txtCurPage" ）.val（）; 
        queryUsers（ページ）; 
    } 
    / * クエリ製品タイプ   * / 
    関数queryTbGoodsType（）{ 
        $アヤックス（{ 
            URL： "製品/ queryTbGoodsType" 、
            種類： "POST" 、
            データ： "" 、
            データ型： "JSON" 、
            成功：機能（データ）{ 
                のために（VARのI = 0;私はdata.lengthを<;I ++ ）{ 
                    VARのOBJ= データ[I]; 
                    $（ ".sele "）追加（"<オプション値= ' "+ obj.typeId +"'> "+ obj.typeName +"</オプション>" ）; 
                } 
            } 
        }）。
    } 
    / * 添加修改之前清空形成表单* / 
    $（文書）.on（ "クリック" "emptys。" 、関数（）{ 
        $（ "#Staff_ID"）のval（ "" ）; 
        $（「#Staff_No "）.val（"」）; 
        $（ "#Staff_Code"）のval（ ""。）; 
        $（ ""）のval（ "#Staff_Name" ）; 
        $（ "#Staff_LoginName"）のval（ ""。）; 
        $（ "#Staff_Pass"）。valを（ ""）; 
        $（ "#Staff_Title"）のval（ "" ）; 
        $（ "#Staff_Level"）のval（ ""。）; 
        $（ "#Staff_Pic"）のval（ "" ）; 
        $（ "#Staff_Enable"）のval（ ""。）; 
    }）; 
    / * 添加修改   * / 
    / * $（文書）.on（ "クリック"、 "＃1 saveUploadOrUpdate"、機能（）{ 
         //警告（$（ "＃1をForm1"）（シリアライズ））; 
        $アヤックス（{ 
            URL： "ユーザー/ saveUploadOrUpdate"、
            種類： "ポスト"、
            データ：$（ "＃1をForm1"）シリアライズ（）、
            データ型： "テキスト"、
                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(1);
            }
        });
    });
    /*修改前查询  */
    $(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();
                }
            });
        }else{
            return false;
        }
    });


    /*失去焦点*/
    function setStaffId(){
        var Id=$("#Staff_Code").val();
        $("#Staff_No").val(Id);

    }

</script>

 

おすすめ

転載: www.cnblogs.com/kkxwze/p/11423954.html
おすすめ
ランキング
チップ製造の詳しい説明 エッチング原理 学習メモ(5)
StringBuilderを持つコンストラクタがそうではないのはなぜStringクラスのコンストラクタメソッドは、パラメータのStringBufferの使用の同期ブロックでいますか？
[Done] exited with code=3221225477 in 34.566 seconds
并行端口（Parallel Port）
推奨システム評価試験
3.22のノートが質問を行います
手紙の面白い組み合わせ
Flutter ポッドのインストールが報告されました [!] プロジェクト ディレクトリ ソリューションに Podfile が見つかりません
PromSQL の実践的なクエリ ステートメントの概要 (常に更新)
使用dedecms織ラベルはarclist夢
アーカイブ
もっと
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)

コードワールド

© 2018 codetd.com