form写法
<form enctype="multipart/form-data" action="" id="from-pro" method="post">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">京东事业部商品编码</span>
<c:if test="${empty product.jdcode}">
<input type="text" value="${product.jdcode }" class="form-control" placeholder="请输入京东事业部商品编码" id="jdcode" name="jdcode" >
</c:if>
<c:if test="${not empty product.jdcode}">
<input type="text" value="${product.jdcode }" class="form-control" placeholder="请输入京东事业部商品编码" id="jdcode" name="jdcode" readonly="readonly">
</c:if>
</div>
</div>
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"> 价格</span>
<input type="text" value="${product.price }" class="form-control" placeholder="请输入价格" id="price" name="price" >
</div>
</div>
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"> 产品名称</span>
<input type="text" value="${product.name }" class="form-control" placeholder=" 请输入产品名称" id="name" name="name" disabled="disabled">
</div>
</div>
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"> 标签条码(69码)</span>
<input type="text" value="${product.code }" class="form-control" placeholder=" 请输入标签条码(69码)" id="code" name="code" disabled="disabled">
</div>
</div>
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"> 酒精度%vol</span>
<input type="text" value="${product.jjd }" class="form-control" placeholder=" 请输入酒精度%vol" id="jjd" name="jjd" disabled="disabled">
</div>
</div>
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon"> 容量ml</span>
<input type="text" value="${product.volume }" class="form-control" placeholder=" 请输入容量ml" id="volume" name="volume" disabled="disabled">
</div>
</div>
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">小图(尺寸:150X150px)</span>
<input name="file" type="file" id="loadfile" style="margin-top:1px">
</div>
</div>
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">大图(尺寸:260X260px)</span>
<input name="file2" type="file" id="loadfile2" style="margin-top:1px">
</div>
</div>
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">详情图</span>
<input name="file3" type="file" id="loadfile3" style="margin-top:1px">
</div>
</div>
<div class="col-md-12">
<input id="btn" type="button" class="btn btn-primary btn-large" style="float:right" onclick="yanzheng()" value="确认"/>
</div>
</div>
</form>
js写法
$.ajaxSetup({ //设置ajax提交为同步提交
async : false
});
//保存
function yanzheng(){
$("#btn").attr("disabled", true);
/* var file = document.getElementById("loadfile");
if (file.value != "" && file.files[0].size>2097152 ) {
layer.msg('附件大小不能大于2M');
$("#btn").attr("disabled", false);
return;
}
var file2 = document.getElementById("loadfile2");
if (file2.value != "" ) {
layer.msg('附件大小不能大于2M');
$("#btn").attr("disabled", false);
return;
}
var file3 = document.getElementById("loadfile3");
if (file3.value != "" ) {
layer.msg('附件大小不能大于2M');
$("#btn").attr("disabled", false);
return;
} */
<%--
if(certnum == null || certnum == "") {
layer.msg("证书编号不能为空!");
return false;
}
--%>
var form = new FormData(document.getElementById("from-pro"));
/* if(!check()){
layer.msg("价格必须为数字!");
$("#btn").attr("disabled", false);
return;
} */
if(/^\d+(\.\d{1,2})?$/.test($("#price").val())){
}else{
layer.msg("价格框请输入精度为两位小数以内的正数!");
$("#btn").attr("disabled", false);
return;
}
$.ajax({
type : "POST",
url : "<%=basePath%>card/updateProduct",
dataType:'text',
async:false,
data :form,
processData: false,
contentType: false,
success : function(data) {
if(data=="picture"){
layer.msg("请上传图片格式附件!(BMP/PNG/GIF/JPG/JPEG)", {icon: 5});
}else if(data=="dub"){
layer.msg("请勿重复提交!");
}else if(data=="ok"){
parent.layer.msg('操作成功!', {icon: 1});
var index = parent.layer.getFrameIndex(window.name);
parent.refreshPage();
}else if(data == "skuError"){
layer.msg("sku不能重复!");
}else{
alert("保存失败!");
}
$("#btn").attr("disabled", false);
parent.layer.close(index);
}
});
}
function check(){
var data = document.getElementById("price").value;
var reg = /^([0-9]|\.)+$/;//匹配一个马上的0-9和小数点
if(reg.test(data) == true){
return true;
}else{
return false;
}
}
后台接受
@RequestMapping("/updateProduct")
@ResponseBody
public String updateProduct(HttpSession session, HttpServletRequest request, Product product, String token) {
MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;
String id = request.getParameter("id");
String msg = "";
try {
if (Double.parseDouble(product.getPrice()) < 0) {
return "numError";
}
} catch (Exception e) {
log.error("价格必须为正数");
return "numError";
}
try {
//sku重复验证
/*List<Product> groups=productDao.queryAllSku();
for (Product product2 : groups) {
if (product2.getSku().equals(product.getSku()) && !product.getId().equals(product2.getId())) {
return "skuError";
}
}*/
String path = session.getServletContext().getRealPath("");// 获取项目动态绝对路径
String realpath=path;
boolean b = UserAgentUtil.isRepeatSubmit(request, token);// 判断用户是否是重复提交(按钮连续快速点击两次)
if (b == true) {
// 重复提交
return "dub";
}
String token1 = TokenProccessor.getInstance().makeToken();// 创建令牌
request.getSession().removeAttribute("token");
request.getSession().setAttribute("token", token1); // 在服务器使用session保存token(令牌)
MultipartFile file1 = req.getFile("file");
MultipartFile file2 = req.getFile("file2");
MultipartFile file3 = req.getFile("file3");
String url1 = "";
String url2 = "";
String url3 = "";
if (null != file1 && !"".equals(file1.getOriginalFilename())) {
// 物理路径(跟项目平级)
String filename1 = file1.getOriginalFilename();
String prefix1 = filename1.substring(filename1.lastIndexOf(".") + 1).toUpperCase();
String reString1 = yanzheng(file1,prefix1);
if (!"".equals(reString1)) {
return reString1;
}
// 保存图片信息
url1 = "picture/" + btUtil.getUUid() + "." + prefix1 ;
product.setPicture(url1);
}
if (null != file2 && !"".equals(file2.getOriginalFilename())) {
// 物理路径(跟项目平级)
String filename2 = file2.getOriginalFilename();
String prefix2 = filename2.substring(filename2.lastIndexOf(".") + 1).toUpperCase();
String reString2 = yanzheng(file2,prefix2);
if (!"".equals(reString2)) {
return reString2;
}
// 保存图片信息
url2 = "picture/" + btUtil.getUUid() + "." + prefix2;
product.setPicture2(url2);
}
if (null != file3 && !"".equals(file3.getOriginalFilename())) {
// 物理路径(跟项目平级)
String filename3 = file3.getOriginalFilename();
String prefix3 = filename3.substring(filename3.lastIndexOf(".") + 1).toUpperCase();
String reString3 = yanzheng(file3,prefix3);
if (!"".equals(reString3)) {
return reString3;
}
// 保存图片信息
url3 = "picture/" + btUtil.getUUid() + "." + prefix3 ;
product.setPicture3(url3);
}
cardService.updateProduct(product);
if (null != file1 && !"".equals(file1.getOriginalFilename())) {
FileUtils.writeByteArrayToFile(new File(realpath+"/"+url1), file1.getBytes());
}
if (null != file2 && !"".equals(file2.getOriginalFilename())) {
FileUtils.writeByteArrayToFile(new File(realpath+"/"+url2), file2.getBytes());
}
if (null != file3 && !"".equals(file3.getOriginalFilename())) {
FileUtils.writeByteArrayToFile(new File(realpath+"/"+url3), file3.getBytes());
}
} catch (Exception e) {
log.error(e.getMessage());
e.printStackTrace();
return "error";
}
return "ok";
}