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

5 篇文章 0 订阅

我是通过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) {
		//内部代码实现
	}

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值