javascript - 使用 AngularJs 上传文件-6ren

javascript - 使用 AngularJs 上传文件

转载作者：行者123 更新时间：2023-12-03 10:18:38

我想上传带有 html 标签的图像或文件，但我读到 angularJs 不支持此标签，因此解决方案是创建一个自定义指令。所以在我的页面index.html中我写了这段代码:

<body ng-controller="myController">
     <input type="file" file-model="myFile"/>
</body>

在我的 js 文件中，我编写了以下代码:

var modulo = angular.module('myApp', []);


modulo.directive('fileModel', function() {
    var modulo = angular.module('myApp', []);
         return {
              restict: 'A',
              link: function (scope, element, attr) {

         }
 }

我不明白如何读取用户上传的文件，所以我不明白链接函数中写了什么。我该如何解决我的问题？有没有人帮助我？谢谢!

最佳答案

如果您的浏览器不支持 FileReader API，您将无法读取该文件。

您的指令应用于文件上传控件。所以，你可以监听它的变化事件。通过此更改事件，您可以提取事件中提供的文件对象，发出事件以将其捕获到 Controller 。

app.directive('fileUpload', function () {
return {
    scope: true, 
    link: function (scope, element, attrs) {
        /*Every time you select a file or a multiple files, change event is triggered. 
        So, with this on, we are attaching a listener event to it. This event also contains useful data. Like the array of selected files. 

        So, we iterate over the selected files, and emit an event containing file info.*/
        element.on('change', function (event) {
            var files = event.target.files;                
            for (var i = 0;i<files.length;i++) {

                scope.$emit("fileSelected", { file: files[i] });
            }                                       
        });
    }
};

使用此代码，您将监听文件上传控件的更改事件。在更改时，您将发出一个名为 fileSelected 的事件，您将在 Controller 中接收该事件。

function DefaultController($scope){
      $scope.files = [];
      $scope.$on('fileSelected', function($event, args){
            $scope.files.push( args.file );
};

请注意，使用此代码，您仅在范围内添加文件对象。您仍然需要发送上传文件的请求。

您可以使用以下代码from稍微修正一下。

$http({
            method: 'POST',
            url: "/Api/PostStuff",
            headers: { 'Content-Type': undefined},
            transformRequest: function (data) {
                var formData = new FormData();

                formData.append("model", angular.toJson(data.model));

                for (var i = 0; i < data.files.length; i++) {                        
                    formData.append("file" + i, data.files[i]);
                }
                return formData;
            },                
            data: { model: $scope.model, files: $scope.files }
        }).
        success(function (data, status, headers, config) {
            alert("success!");
        }).
        error(function (data, status, headers, config) {
            alert("failed!");
        });