前台Form表单上传文件到后台,html+js(包括文件选择按钮和上传按钮)

1、html

前台略显粗糙,一个文件上传的input框,一个提交按钮

	<form id="attachments1" enctype="multipart/form-data" class="form-horizontal" novalidate="novalidate">
							<div class='form-body'>
								<div class='form-group'>
									<label class="control-label col-md-1">附件上传:</label>
									<div id="attachmentInputs1" class="col-md-3">
										<input name="attachment1" type="file" id = "file1" class="form-control input-attachment" multiple="multiple"/>
										<button id="file3" type="button" ng-click="check1()"  ng-class="button-primary"
												class="button-primary"> {{sysFileInfoCommon.ocr}}
										</button>
									</div>
								</div>
							</div>
						</form>

2、js

ajax提交成功后的属于我自己的业务代码,大家可自动屏蔽

$scope.check1 = function () {
            var doc = document.getElementById('file1');
            for(var i=0;i<doc.files.length;i++){
                var name = doc.files[i].name;
                var hz = name.substring(name.lastIndexOf(".")+1);
                if(hz!="pdf" && hz!="jpg"){
                    GillionMsg.alert($scope.sysFileInfoCommon.tips, "请选择正确的文件类型!", null);
                    return false;
                }
            }
            var formData = new FormData();
            //注入 name=file
            var files = $("#attachmentInputs1 input[type='file']");
            for (var i = 0; i < files[0].files.length; i++) {
                formData.append("attachment", files[0].files[i]);
            }

            //执行上传
            $.ajax({
                url:$oam.ctx + '/dc/mblFileUpload1',
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    if (data.success != undefined && data.success == true) {
                        $scope.getSysFileInfoPages();
                        if ($scope._pageState) $scope._pageState.resetDataState();
                        var gridVerifyArr = [
                            {scope: "$scope", grid: ["sysFileInfo"]},
                            {
                                scope: "$scope",
                                grid: ["sysFileInfoAppRtm"],
                                loadOneToOneSubBoData: false,
                                clearDeletedJsVariable: false
                            }
                        ];
                        _this.gridVerify({boName: "SysFileInfo", scope: $scope, settings: gridVerifyArr});
                        GillionMsg.alert($scope.sysFileInfoCommon.tip, data.msg);

                        $timeout(function () {
                            if ($scope._pageState) $scope._pageState.resetDataState();
                        });
                    }
                },
            });
        };

3、controller

后台接受到的MultipartFile[] attachment,大家可以根据业务进行操作

@RequestMapping("/dc/mblFileUpload1")
    public ResultVo batchUploadFile1(@RequestParam("attachment")MultipartFile[] attachment,HttpServletRequest request, HttpServletResponse response){
        String extension = "MBL";
        return batchUploadManager.batchUploadFile(attachment,extension,request,response);

    }

关于获取表单内容还有另一种方法:
直接这样:

 var formData = new FormData($('#uploadForm')[0]);
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值