由于我是 AngularJS 的新手,我不知道如何使用 AngularJS 在 MVC 中上传文件。 我试图上传一些没有任何特定类型或扩展名的文件,但失败了。
我创建了一个 javascript 文件,其中有-
这是serviceJS-
var app = angular.module("app", []);
app.service('FileUploadService', ['$http', function ($http) {
this.uploadFileToUrl = function (file, uploadUrl) {
var fd = new FormData();
fd.append('file', file);
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
})
.success(function () {
})
.error(function () {
});
}
}]);
这是 Controller 部分-
app.controller('FileUploadController', ['$scope', 'FileUploadService', function($scope, FileUploadService) {
$scope.uploadFile = function () {
var file = $scope.myFile;
console.log('file is ');
console.dir(file);
var uploadUrl = "/Home/FileUploadFromAngular";
FileUploadService.uploadFileToUrl(file, uploadUrl);
};
}]);
并且,在 View 页面中,
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/AngScript/FileUpload.js"></script>
<script src="~/Scripts/angular-ui/ui-bootstrap.min.js"></script>
<div ng-controller="FileUploadController">
<input type="file" ng-model="myFile" />
<button ng-click="uploadFile()">Upload</button>
</div>
它将 myFile 作为 Controller 中的未定义。我无法对此进行调试。
提前致谢。
最佳答案
您不能绑定(bind) <input type="file">
到 $scope
多变的。您将需要创建一个指令来捕获 onchange event
文件输入标签。例如<input type="file" name="myFile" file-upload/>
指令看起来像这样:
angular.module("app.directives", []).directive('fileUpload', function () {
return {
scope: true,
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var files = event.target.files;
//iterate files since 'multiple' may be specified on the element
if(files.length == 0){
scope.$emit("fileSelected", { file: null, field: event.target.name });
} else{
for (var i = 0;i<files.length;i++) {
//emit event upward
scope.$emit("fileSelected", { file: files[i], field: event.target.name });
}
}
});
}
};
});
之后,您可以像这样在 Controller 中捕获广播:
$scope.$on("fileSelected", function (event, args) {
$scope.$apply(function () {
switch (args.field) {
case "myFile":
$scope.myFile = args.file;
break;
default:
break;
}
});
});
您的服务方法可以是这样的:
this.uploadFileToUrl = function (file, uploadUrl) {
return $http({
method: 'POST',
url: uploadUrl,
headers: { 'Content-Type': undefined },
transformRequest: function() {
var formData = new FormData();
if(file){
formData.append("myFile", file);
}
return formData;
}
})
}
关于javascript - 如何在 MVC 中使用 AngularJS 上传文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35286152/