JqueryAjaxFormData文件异步上传

Posted 光何

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于JqueryAjaxFormData文件异步上传的主要内容,如果未能解决你的问题,请参考以下文章

JS异步上传文件

简述三种异步上传文件方式

异步 JQUERY 文件上传

异步上传文件

java 异步上传文件

求一段JS或Jquery异步上传图片的代码