angularJs 取<input type='file'>
发布时间:2020-12-17 09:45:06 所属栏目:安全 来源:网络整理
导读:用AngularJS写文件上传时遇到了个问题,就是文件类型判断,一般上传文件类型判断都是在前端完成,如果提交给后台发请求判断处理,这无疑会增加服务器端压力。 AngularJS还有点不同的是,这里用的都是双向绑定,但是双向绑定时参数传过去是undefined或者为空
用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}} onchange='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{ 发送后台操作... } }是的,这样就可以了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |