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