正文
JqueryAjaxFormData文件异步上传
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>添加图书</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
function checkNull(ele)
{
var error = $("#error");
error.html("");
if(ele.val() == "")
{
error.html(ele.attr("id")+"不能为空!");
return false;
}
return true;
}
function checkTypeid()
{
return true;
}
function checkName()
{
return checkNull($("#name"));
}
function checkAuthor()
{
return checkNull($("#author"));
}
function checkPrice()
{
var price = $("#price");
var error = $("#error");
error.html("");
if(checkNull(price))
{
if(isNaN(price.val()))
{
error.html("价格必须为数字!");
return false;
}
return true;
}
error.html("价格不能为空!");
return false;
}
function checkUser()
{
return checkNull($("#user"));
}
function checkDescription()
{
return checkNull($("#description"));
}
function checkState()
{
return checkNull($("#state"));
}
function checkAll()
{
if(checkTypeid() && checkName() && checkAuthor() &&
checkPrice() && checkUser() && checkDescription() && checkState())
{
return true;
}
return false;
}
function uploadFile()
{
var input = $("#input");
var form = $("#form");
if(checkNull(input))
{
var formData = new FormData(form[0]);
$.ajax
({
url : "file_upload.action",
type : "post",
data : formData,
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
beforeSend:function()
{
confirm("确认上传图片？");
},
success : function(data)
{
if(data.status == 1)
{
alert("成功上传"+ data.inputFileName);
$("#picture").val(data.realPath);
}
else
{
alert("上传失败!");
}
},
error : function(responseStr)
{
alert("服务器忙!");
}
});
}
}
$
(
function prepare()
{
var typeid = $("#typeid");
var stateSpan = $("#stateSpan");
typeid.html("");
$.ajax
({
url:"bookType_getType.action",
type:"post",
dataType:"json",
success:function(data)
{
var typeList = data.typeList;
var stateMap = data.stateMap;
for(var i = 0; i < typeList.length; i++)
{
var type = typeList[i];
var option = "<option value='"+type.id+"'>"+type.name+"</option>";
typeid.append(option);
}
for(var key in stateMap)
{
var radio = "<input type='radio' value='"+ key +"' />" + stateMap[key];
stateSpan.append(radio);
}
},
error:function()
{
alert("服务器忙！");
}
});
}
);
</script>
</head> <body>
<div align="center">
<h1>添加图书</h1>
<a href="book_manage.action">浏览图书</a><br/><br/><br/>
<div>
<s:form action="file_upload.action" id="form" method="post" theme="xhtml" enctype="multipart/form-data">
<s:file label="上传封面" name="input" id="input"></s:file>
</s:form>
<input type="button" value="上传图片" onclick="uploadFile();" />
</div><br/>
<s:form action="book_add.action" method="post" theme="xhtml" onsubmit="return checkAll();" validate="true">
图书类别:<select name="book.typeid" id="typeid" onblur="checkTypeid();"></select><br/>
图书状态:<span id="stateSpan"></span>
<input type="hidden" name="book.picture" id="picture"/>
<s:textfield label="图书名称" name="book.name" id="name" onblur="checkName();"></s:textfield>
<s:textfield label="图书作者" name="book.author" id="author" onblur="checkAuthor();"></s:textfield>
<s:textfield label="图书价格" name="book.price" id="price" onblur="checkPrice();"></s:textfield>
<s:textfield label="借书读者" name="book.user" id="user" onblur="checkUser();"></s:textfield>
<s:textarea label="图书描述" name="book.description" id="description" onblur="checkDescription();"></s:textarea>
<s:submit align="center"></s:submit>
<s:token></s:token>
</s:form>
<span style="font-weigh:bold;color:red;"><h3 id="error"></h3></span>
<s:if test="flag == true">
<script>alert("图书添加成功！");</script>
</s:if>
<s:if test="#session.serverCheck != null">
<script>alert("价格必须大于0！");</script>
</s:if>
</div>
</body>
</html>
