包含文件上传的form表单提交

包含文件上传的form表单提交

我是通过FormData来进行封装表单的。

1.首先包含文件上传的表单要规定enctype="multipart/form-data"

<form id="menuUploadForm" class="layui-form" style="margin-top: 20px;margin-right: 20px" enctype="multipart/form-data">
<div class="layui-form-item">
<label class="layui-form-label">所属店铺</label>
<div class="layui-input-block" id="box-select-second">
<select id="itemStoreSelect" name="storeId" lay-verify="required" lay-search="" onchange="changeItem();">
<option value="" selected>请选择店铺信息</option>
<c:forEach var="store" items="${storeList}">
<option value="${store.id}">${store.name}</option>
</c:forEach>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择文件</label>
<div class="layui-input-block">
<div class="div1">
<div class="div2">点击上传</div>
<input type="file" name="file" id="file" class="file_input"/>
<span class="showFileName"></span>
<span class="fileerrorTip"></span>
</div>
</div>
</div>
<div class="layui-form-item" style="color: #5FB878;">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<span>文件格式为.txt，文件内容为以"，"分割的24位RFID数字码</span>
</div>
</div>
</form>
2.通过FormData来封装数据，如下图所示

 

$("#uploadRfid").on('click', function () {
//导入RFID触发事件
layer.open({
type: 2,
anim: 0,
area: ['40%', '60%'],
title: '上传RFID',
btn: ['保存', '关闭'],
yes: function (index, layero) {
//按钮【保存】的回调
var body = layer.getChildFrame('body', index);
var formData = new FormData();
formData.append('file', body.find('#file')[0].files[0]);
formData.append('storeId', body.find('#itemStoreSelect').val());
$.ajax({
url: "${basePath}/itemRFID/upload",
type: 'post',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (result) {
//判断数据是不是成功修改
if (result['code'] == 'SUCCESS') {
layer.msg("保存成功");
layer.close(index);
table.reload('idTest', {});
} else {
layer.msg(result['message'],{time: 2000});
return false;
}

},
error: function (data) {
alert("网络请求失败，请重试！");
}
})
},
content: '${basePath}/itemRFID/toUploadRFID'
});
});
3.controller参数封装

@RequestMapping(value = "/upload", method = RequestMethod.POST, produces = MEDIATYPE_CHARSET_JSON_UTF8)
@ResponseBody
public String upload(HttpServletRequest request, MultipartFile file,@RequestParam("storeId") String storeId) {
//内部代码实现
}

————————————————
版权声明：本文为CSDN博主「一个懒惰的羊」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_23543983/article/details/81091777