文件上传前台实现,一个按钮实现从文件选择到上传文件

实现过程就是用一个按钮绑定隐藏的input文件框,点击该按钮的时候触发文件input框
首先点击按钮执行方法:selectFile1(),然后在js中的selectFile1方法中执行这个$("#file1").trigger(“click”);,这个是引发文件input框,然后执行上传方法

1、html

<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" onchange="angular.element(this).scope().check1()" class="form-control input-attachment" multiple="multiple" ng-class="button-primary" style="width:180px;display:none;"/>
									<button id="file3" type="button" ng-click="selectFile1()"  ng-class="button-primary"
											class="button-primary"> MBL上传
									</button>
								</div>
							</div>
						</div>
					</form>

2、js

  $scope.selectFile1 = function () {
            $("#file1").trigger("click");
        }

        $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) {
          
                },
            });
        };

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值