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文件异步上传的主要内容，如果未能解决你的问题，请参考以下文章