用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{ 发送后台操作... } }是的,这样就可以了。