如何在MVC中使用AngularJS上传文件 [英] How to Upload file using AngularJS in MVC

问题描述

由于我是AngularJS的新手，我不知道如何使用AngularJS在MVC中上传文件。
我试图上传一些没有任何特定类型或扩展名的文件，但是失败了。

As I am new to AngularJS, I Don't know how to upload file in MVC using AngularJS. I am trying to upload some files without any specific type or extension, but failed.

我创建了一个javascript文件，其中包含 -

I created a javascript file which have-

这是serviceJS -

Here is 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 () {    
            });     
        }   
    }]);

这是控制器部分 -

This is controller part-

    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);
        };
    }]);

并且，在视图页面中，

 <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 。我无法调试这个。

提前感谢。

It is taking myFile as undefined in controller. I am unable to debug this.
Thanks in advance.

推荐答案

你无法绑定一个< input type =file> 到 $ scope 变量。您需要创建一个指令来捕获文件输入标记的 onchange事件。例如< input type =filename =myFilefile-upload /> ，该指令如下所示：

You cannot bind the an <input type="file"> to an $scope variable. You will need to create a directive which captures the onchange event of the file input tag. for example <input type="file" name="myFile" file-upload/> and the directive looks like this:

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 });
                }
            }
        });
    }
};
});

之后，您可以在控制器中捕捉广播，如下所示：

After that, you can catch the broadcast in your controller like this:

$scope.$on("fileSelected", function (event, args) {
    $scope.$apply(function () {
        switch (args.field) {
            case "myFile":
                $scope.myFile = args.file;
                break;
            default:
                break;
        }
    });
});

您的服务方式可以是这样的：

Your Service method can be comething like this:

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;
        }
    })
}

这篇关于如何在MVC中使用AngularJS上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！