想用 html 和 angularjs 在本地上传文件答案

【问题标题】：Want to upload file locally with html and angularjs想用 html 和 angularjs 在本地上传文件
【发布时间】：2015-11-12 08:57:30
【问题描述】：

我有上传文件的 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>

请不要与指令混淆。它们来自引导程序。

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

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

    }
});

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

【问题讨论】：

标签： angularjs html file-upload angularjs-scope blob

【解决方案1】：

如果您想保存到本地文件中，您需要考虑几件事情。首先，您必须修改您的 html 部分以消除帖子部分，因为对于帖子，您也必须指定 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>

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

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 文件，但您可以扩展到任何文件类型。你可以在网上找到很多关于如何做到这一点的信息。

这是小提琴： http://jsfiddle.net/HB7LU/16576/

【讨论】：

我有一个类似的查询我将网站托管在服务器上，用户可以上传文件（它可以是文本 pdf doc 或图像）那么如何将上传的文件保存在服务器中的某个位置？ ?所以在服务器上我必须在本地保存文件。 @Simo Endre
不太明白你的问题。所以你要保存上传到服务器的文件？
是的，所以一旦用户从他的计算机上传文件，我想将它保存在开发服务器的某个位置。在开发服务器的 /home/uploadedfiles/ 目录中添加文件名。
您需要从后端执行此操作。您执行此操作的方式取决于您使用的语言。

【解决方案2】：

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

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链接以获取更多参考

【讨论】：

OP 想在本地保存！
但问题是我想把它保存在本地。