• JqueryAjaxFormData文件异步上传


      1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
      2 <%@ taglib uri="/struts-tags" prefix="s" %>
      3 <%
      4 String path = request.getContextPath();
      5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
      6 %>
      7 
      8 <!DOCTYPE HTML>
      9 <html>
     10   <head>
     11     <base href="<%=basePath%>">
     12     <title>添加图书</title>
     13     <meta http-equiv="pragma" content="no-cache">
     14     <meta http-equiv="cache-control" content="no-cache">
     15     <meta http-equiv="expires" content="0">
     16     <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
     17     <script>
     18         function checkNull(ele)
     19         {
     20             var error = $("#error");
     21             error.html("");
     22             if(ele.val() == "")
     23             {
     24                 error.html(ele.attr("id")+"不能为空!");
     25                 return false;
     26             }
     27             return true;
     28         }
     29         function checkTypeid()
     30         {
     31             return true;
     32         }
     33         function checkName()
     34         {
     35             return checkNull($("#name"));
     36         }
     37         function checkAuthor()
     38         {
     39             return checkNull($("#author"));
     40         }
     41         function checkPrice()
     42         {
     43             var price = $("#price");
     44             var error = $("#error");
     45             error.html("");
     46             if(checkNull(price))
     47             {
     48                 if(isNaN(price.val()))
     49                 {
     50                     error.html("价格必须为数字!");
     51                     return false;
     52                 }
     53                 return true;
     54             }
     55             error.html("价格不能为空!");
     56             return false;
     57         }
     58         function checkUser()
     59         {
     60             return checkNull($("#user"));
     61         }
     62         function checkDescription()
     63         {
     64             return checkNull($("#description"));
     65         }
     66         function checkState()
     67         {
     68             return checkNull($("#state"));
     69         }
     70         function checkAll()
     71         {
     72             if(checkTypeid() && checkName() && checkAuthor() &&
     73                     checkPrice() && checkUser() && checkDescription() && checkState())
     74             {
     75                 return true;
     76             }
     77             return false;
     78         }
     79         function uploadFile()
     80         {
     81             var input = $("#input");
     82             var form = $("#form");
     83             if(checkNull(input))
     84             {
     85                 var formData = new FormData(form[0]);
     86                 $.ajax
     87                 ({ 
     88                     url : "file_upload.action", 
     89                     type : "post", 
     90                     data : formData, 
     91                     // 告诉jQuery不要去处理发送的数据
     92                     processData : false, 
     93                     // 告诉jQuery不要去设置Content-Type请求头
     94                     contentType : false,
     95                     beforeSend:function()
     96                     {
     97                         confirm("确认上传图片?");
     98                     },
     99                     success : function(data) 
    100                     { 
    101                         if(data.status == 1)
    102                         {
    103                             alert("成功上传"+ data.inputFileName);
    104                             $("#picture").val(data.realPath);
    105                         }
    106                         else
    107                         {
    108                             alert("上传失败!");
    109                         }
    110                     }, 
    111                     error : function(responseStr) 
    112                     { 
    113                         alert("服务器忙!");
    114                     } 
    115                 });
    116             }
    117         }
    118         $
    119         (
    120             function prepare()
    121             {
    122                 var typeid = $("#typeid");
    123                 var stateSpan = $("#stateSpan");
    124                 typeid.html("");
    125                 $.ajax
    126                 ({
    127                     url:"bookType_getType.action",
    128                     type:"post",
    129                     dataType:"json",
    130                     success:function(data)
    131                     {
    132                         var typeList = data.typeList;
    133                         var stateMap = data.stateMap;
    134                         for(var i = 0; i < typeList.length; i++)
    135                         {
    136                             var type = typeList[i];
    137                             var option = "<option value='"+type.id+"'>"+type.name+"</option>";
    138                             typeid.append(option);
    139                         }
    140                         for(var key in stateMap)
    141                         {
    142                             var radio = "<input type='radio' value='"+ key +"' />" + stateMap[key];
    143                             stateSpan.append(radio);
    144                         }
    145                     },
    146                     error:function()
    147                     {
    148                         alert("服务器忙!");
    149                     }
    150                 });
    151             }
    152         );
    153     </script>
    154   </head>
    155   
    156   <body>
    157     <div align="center">
    158         <h1>添加图书</h1>
    159         <a href="book_manage.action">浏览图书</a><br/><br/><br/>
    160         <div>
    161             <s:form action="file_upload.action" id="form" method="post" theme="xhtml" enctype="multipart/form-data">
    162                 <s:file label="上传封面" name="input" id="input"></s:file>
    163             </s:form>
    164             <input type="button" value="上传图片" onclick="uploadFile();" />
    165         </div><br/>
    166         <s:form action="book_add.action" method="post" theme="xhtml" onsubmit="return checkAll();"  validate="true">
    167             图书类别:<select name="book.typeid" id="typeid" onblur="checkTypeid();"></select><br/>
    168             图书状态:<span id="stateSpan"></span>
    169             <input type="hidden" name="book.picture" id="picture"/>
    170             <s:textfield label="图书名称" name="book.name" id="name" onblur="checkName();"></s:textfield>
    171             <s:textfield label="图书作者" name="book.author" id="author" onblur="checkAuthor();"></s:textfield>
    172             <s:textfield label="图书价格" name="book.price" id="price" onblur="checkPrice();"></s:textfield>
    173             <s:textfield label="借书读者" name="book.user" id="user" onblur="checkUser();"></s:textfield>
    174             <s:textarea label="图书描述" name="book.description" id="description" onblur="checkDescription();"></s:textarea>
    175             <s:submit align="center"></s:submit>
    176             <s:token></s:token>
    177         </s:form>
    178         <span style="font-weigh:bold;color:red;"><h3 id="error"></h3></span>
    179         <s:if test="flag == true">
    180             <script>alert("图书添加成功!");</script>
    181         </s:if>
    182         <s:if test="#session.serverCheck != null">
    183             <script>alert("价格必须大于0!");</script>
    184         </s:if>
    185     </div>
    186   </body>
    187 </html>
  • 相关阅读:
    Linux 02
    Linux 01
    React 函数式组件的 Ref 和子组件访问(useImperativeHandle)
    排序算法之 Java插入排序算法
    排序算法之 Java选择排序算法
    排序算法之 Java冒泡算法
    类加载的过程---验证和准备
    类加载的过程---加载
    mysql explain 查询处理的结果详解
    springboot整合分布式缓存hazelCast
  • 原文地址:https://www.cnblogs.com/guanghe/p/6079936.html
Copyright © 2020-2023  润新知