Jquery Ajax上传文件并提交表单其它属性

21 篇文章 1 订阅
13 篇文章 0 订阅

1.前端代码

$('.btn-confirm').click(function () {
            console.log($( '#postForm').serialize());

            var versionNo = $("#versionNo").val();
            var deviceNoStr = $("input[name='deviceNoStr']").val();
            var batchId = $("input[name='batchId']").val();

            var formData = new FormData();
            console.log($('#upfile')[0].files[0]);

            formData.append("upfile",$('#upfile')[0].files[0]);
            formData.append("versionNo", versionNo);
            formData.append("deviceNoStr", deviceNoStr);
            formData.append("batchId", batchId);

            $.ajax({
                url :window.CMS_URL + "/devops/operation/upgrade.shtml",
                dataType:'json',
                type:'POST',
                async: false,
                data: formData,
                processData : false, // 使数据不做处理
                contentType : false, // 不要设置Content-Type请求头
                success: function(data){
                    console.log(data);
                    if (data.status == 'ok') {
                        alert('上传成功!');
                    }

                },
                error:function(response){
                    console.log(response);
                }
            });

        });

 

 

<form id= "uploadForm" method= "post" enctype ="multipart/form-data">
            <div class="portlet-body" style="margin: 15px 0;">
                <span class="file-des">程序路径:</span>
                <div class="wrap-upload" style="display: flex">
                    <div class="showFileName"
                    ></div>
                    <a href="javascript:;" class="file btn btn-sm green">上传文件
                        <input type="file" name="upfile" id="upfile" placeholder="请选择文件">
                    </a>
                    <div class="fileerrorTip" style="line-height: 30px;margin-right: 10px"></div>
                </div>
            </div>
            <div class="portlet-body">
                <span class="file-des">版本号:</span>
                <div class="wrap-upload item-inputs" >
                    <input class="form-control" type="text" name="versionNo" id="versionNo" placeholder="版本号" required>
                </div>
            </div>
            <div style="    margin: 0px 100px;padding-top: 20px;">
                <div class="btn btn-sm green control-btn-item btn-confirm" >确认</div>
                <div style="margin-left: 30px;" class="btn btn-sm green control-btn-item" onclick="closePopup()">取消</div>
            </div>

            <input type="hidden" name="deviceNoStr" value="${(devopsParamsQo.deviceNoStr)!''}"/>
            <input type="hidden" name="batchId" value="${(devopsParamsQo.batchId)!''}"/>
        </form>

 

2.后端代码

 @RequestMapping(value = "/upgrade", method = RequestMethod.POST)
    @ResponseBody
    public ResultVo upgrade(@RequestPart( value = "upfile", required = true) MultipartFile file,
                            @RequestParam(name = "versionNo", required = true) String versionNo,
                            @RequestParam(name = "batchId", required = true) String batchId,
                            @RequestParam(name = "deviceNoStr", required = true) String deviceNoStr) {
        DevopsParamsQo qo = new DevopsParamsQo();
        qo.setDeviceNoStr(deviceNoStr);
        List<DeviceDto> addList = getDeviceDtos(qo);

        // TODO 调用前置
        return ResultVoGenerator.genSuccessResultVo();
    }

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宁漂打工仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值