angularJs 取<input type='file'>中文件名 (ng-model获取不了)

AngularJS写文件上传时遇到了个问题,就是文件类型判断,一般上传文件类型判断都是在前端完成,如果提交给后台发请求判断处理,这无疑会增加服务器端压力。

AngularJS还有点不同的是,这里用的都是双向绑定,但是双向绑定时参数传过去是undefined或者为空。

<div  ng-controller="editorProceCtrl" >
           <input type="file"  ng-model="feupload" />{{feupload}}
           <button ng-click="upsave()"  >上传</button>
</div>
js代码
 $scope.upsave = function() {
            alert("@@@@@"+$scope.feupload);//feupload没有值  

           var fd = new FormData();
            var file = document.querySelector('input[type=file]').files[0];

            if($scope.feupload.length> 1 && $scope.feupload) {

                var ldot = filename.lastIndexOf(".");
                var type = filename.substring(ldot + 1);

                if(type != "doc" && type !="docx") {
                    alert("文件类型不对,请重新选择");
                    //清除当前所选文件...
                }else{

                    发送后台操作...
                    
                }
            }
}
直接这样写,后台直接定义取是不行的,ng-model并不能将值传给js

网上找了资料,最后的处理方法:

<div  ng-controller="editorProceCtrl" >//onchange改变事件
            <input type="file"  ng-src={{files[0].name}} οnchange='angular.element(this).scope().fileChanged(this)'/>
            <button ng-click="upsave()"  >上传</button>
</div>
js代码:
        $scope.fileChanged = function(ele){
            $scope.files = ele.files;
            $scope.$apply(); //传播Model的变化。
        }

        /**
         * 文件上传
         */
        $scope.upsave = function() {
            var fd = new FormData();
            var file = document.querySelector('input[type=file]').files[0];

            var filename = $scope.files[0].name;

            if(filename.length> 1 && filename ) {

                var ldot = filename.lastIndexOf(".");
                var type = filename.substring(ldot + 1);

                if(type != "doc" && type !="docx") {
                    alert("文件类型不对,请重新选择");
                    //清除当前所选文件...
                }else{

                    发送后台操作...
                    
                }
            }
是的,这样就可以了。




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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值