想要使用 html 和 angularjs 在本地上传文件

Question

我有 html 上传文件的页面。截至目前，我想将其存储在本地。我为此使用 angularjs。我已经经历了很多解决方案，但没有奏效。这是我的 html 文件：

<body>
    <form action="go" method="post" enctype="multipart/form-data">  
        Select File:<input type="file" name="filename"/><br/>  
        <input ng-click="submit()" class="btn btn-md btn-primary"
            type="submit" value="{{ 'UPLOAD' | translate }}" >
        </input>
    </form>  
</body>

请不要与指令混淆。他们来自 bootstrap。

我已经对 app.js 进行了必要的更改。上传控制器正在获取访问权限。问题是我不知道在函数中写什么，以便文件将存储在本地。这是我的控制器：

newController.controller("UploadController", function($scope, $location, ezfb) {
    alert("inside uploadcontroller");
    $scope.submit = function(){   

    }
});

请帮助我，因为我在这一点上停留了几个小时。提前谢谢你。

Answer 1

首先创建一个指令将您上传的文件绑定到模型：

newController.directive('fileModel', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

添加以下代码：

<body>
    <form action="go" method="post" enctype="multipart/form-data">  
        Select File:<input type="file" name="filename" file-model="myFile"/><br/>  
        <input ng-click="submit()" class="btn btn-md btn-primary"
            type="submit" value="{{ 'UPLOAD' | translate }}" >
        </input>
    </form>  
</body>  



$scope.submit = function(){   
       var formData = new FormData();
       formData.append('file', $scope.myFile);
       $http({
                url: "yourserverurl",
                type: 'POST',
                data:  formData,
                mimeType:"multipart/form-data",
                contentType: false,
                cache: false,
                processData:false
             });
    };

请查看this link以获得更多参考

Answer 2

如果要保存到本地文件中，需要考虑几件事情。首先，您必须修改 html 部分以消除 post 部分，因为对于 post 您还必须指定 url 指向。

<div ng-controller="MyCtrl">
    <div class="elem">         
            Upload a TXT File:<input id="fileForUpload" type="file" name="filename"/><br/>  
        <a ng-click="submit()" class="btn btn-md btn-primary" id ="downloadlink">Download</a>
    </div>
</div>

其次，要将文件保存到本地系统，您需要使用 Blob，这是一个 HTML5 功能。我创建了一个简单的 fiddle 来指向正确的方向。

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

myApp.controller('MyCtrl', ['$scope', function($scope) {    
    
    $scope.submit = function() {
        var textFile = null;
        var makeTextFile = function (text) {
        
            var data = new Blob([text], {type: 'text/plain'});

            // If we are replacing a previously generated file we need to
            // manually revoke the object URL to avoid memory leaks.
            if (textFile !== null) {
              window.URL.revokeObjectURL(textFile);
            }

            textFile = window.URL.createObjectURL(data);
            
            return textFile;
        };
        
        var file = document.getElementById("fileForUpload").files[0];
        if (file) {
            var reader = new FileReader();
            reader.readAsText(file, "UTF-8");

            reader.onload = function (evt) {
                var link = document.getElementById('downloadlink');
                link.href = makeTextFile(evt.target.result);                
                link.setAttribute('download', 'info.txt');
            }
             
        }       
    }
}]);

javascript 部分只能处理 txt 文件，但您可以扩展到任何文件类型。你可以在网上找到很多关于如何做的信息。

这里是fiddle： http://jsfiddle.net/HB7LU/16576/

想要使用 html 和 angularjs 在本地上传文件

Want to upload file locally with html and angularjs

html

blob

file-upload

angularjs

angularjs-scope