AJAX 提交表单数据混合文件
今天做一个SSM框架项目的时候碰到一个问题,ajax表单混合文件提交如何实现,整半天终于弄出来了
HTML部分
<form id="formData">
<div class="form-row">
<div class="form-group col-md-6">
<label>商品名称</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group col-md-6">
<label>商品外部编号</label>
<input type="number" name="externalId" class="form-control">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>所属分类</label>
<select name="categoryId" class="custom-select">
<c:forEach var="items" items="${categories}">
<option value="${items.id}">${items.name}</option>
</c:forEach>
</select>
</div>
<div class="form-group col-md-6">
<label>市场价格</label>
<input type="text" name="price" class="form-control">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>店内价格</label>
<input name="shopPrice" type="text" class="form-control">
</div>
<div class="form-group col-md-6">
<label>商品库存</label>
<input type="number" name="quantity" class="form-control">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>是否记录库存</label>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inventoryFlag"
id="quantityyes" value="0" checked>
<label class="form-check-label" for="quantityyes">是</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inventoryFlag"
id="quantityno" value="1">
<label class="form-check-label" for="quantityno">否</label>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label>是否热销</label>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="hot" id="hotno"
value="1">
<label class="form-check-label" for="hotno">非热门商品</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="hot" id="hotyes"
value="0" checked>
<label class="form-check-label" for="hotyes">热门商品</label>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>状态</label>
<select name="productStatus" class="custom-select">
<option selected value="0">上架</option>
<option value="1">下架</option>
</select>
</div>
<div class="form-group col-md-6">
<label>商品概要说明</label>
<input type="text" name="generalExplain" class="form-control">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>上传图片</label>
<div class="custom-file">
<input type="file" name="file" class="custom-file-input" id="imagefile">
<label class="custom-file-label" for="inputGroupFile03">上传图片</label>
<small
class="form-text text-muted">上传图片的最佳尺寸：300像素*300像素，其他尺寸会影响页面效果，格式png，jpeg，jpg，gif。大小不超过1M</small>
</div>
</div>
</div>
<div class="form-row">
<div>
<button type="button" style="margin-right:10px" id="save"
class="btn btn-success">保存</button>
</div>
<div>
<button type="button" class="btn btn-success">返回</button>
</div>
</div>
</form>
JS部分
$(function () {
//提交
$("#save").click(function () {
//创建表单数据容器
var formData = new FormData()
//获取文件数据
file = $('#imagefile')[0].files[0];
//检查文件上传
if (!file) {
alert('请先上传文件');
return;
}
//添加表单数据
formData.append('file', file);
//得到页面所有表单数据的序列化
var AllInputData = $("#formData").serializeArray();
//Array转Object
AllInputData.forEach(function (e) {
formData.append(e['name'], e['value']);
});
//发送请求
$.ajax({
url: 'addProduct?${_csrf.parameterName}=${_csrf.token}',
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (resp) {
console.log(resp);
}
})
})
})
注意:如果JQuery出现Illegal invocation异常是因为没有取消表单处理,ajax里面添加processData: false属性就OK了
SSM后台接收部分
包含文件用 MultipartFile接收 并且 必须加上@RequestParam注解,不然不能正常接收！ /**
* 添加商品
*/
@RequestMapping(value="addProduct",method=RequestMethod.POST)
//Product是我自己定义的一个包装类,
public String addProduct(Product product,@RequestParam("file")MultipartFile file){
System.out.println(product.getName());
System.out.println(file.getOriginalFilename());
return null;
}