使用AngularJS上传文件

这是我的HTML表单:

<form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

我想从本地机器上传一个图像，并想读取上传文件的内容。所有这些我都想用AngularJS来做。

当我试图打印$scope的值时。文件是未定义的。

当前回答

简单的指令

Html:

<input type="file" file-upload multiple/>

JS:

app.directive('fileUpload', function () {
return {
    scope: true,        //create a new scope
    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
            for (var i = 0;i<files.length;i++) {
                //emit event upward
                scope.$emit("fileSelected", { file: files[i] });
            }                                       
        });
    }
};

在指令中，我们确保创建了一个新的作用域，然后监听对文件输入元素所做的更改。当检测到更改时，以文件对象作为参数向所有祖先作用域(向上)发出事件。

在你的控制器中:

$scope.files = [];

//listen for the file selected event
$scope.$on("fileSelected", function (event, args) {
    $scope.$apply(function () {            
        //add the file object to the scope's files collection
        $scope.files.push(args.file);
    });
});

然后在ajax调用中:

data: { model: $scope.model, files: $scope.files }

http://shazwazza.com/post/uploading-files-and-json-data-in-the-same-request-with-angular-js/

2015-02-03 10:21:17

其他回答

我知道这是一个较晚的条目，但我已经创建了一个简单的上传指令。你可以在任何时间工作!

<input type="file" multiple ng-simple-upload web-api-url="/api/Upload" callback-fn="myCallback" />

在Github上上传更多使用Web API的示例。

2016-03-18 09:35:52

<input type=file>元素默认不使用ng-model指令。它需要一个自定义指令:

使用ng-model1的select-ng-files指令的工作演示

angular.module("app",[]); angular.module("app").directive("selectNgFiles", function() { return { require: "ngModel", link: function postLink(scope,elem,attrs,ngModel) { elem.on("change", function(e) { var files = elem[0].files; ngModel.$setViewValue(files); }) } } }); <script src="//unpkg.com/angular/angular.js"></script> <body ng-app="app"> <h1>AngularJS Input `type=file` Demo</h1> <input type="file" select-ng-files ng-model="fileList" multiple> <h2>Files</h2> <div ng-repeat="file in fileList"> {{file.name}} </div> </body>

美元http。从FileList中post

$scope.upload = function(url, fileList) {
    var config = { headers: { 'Content-Type': undefined },
                   transformResponse: angular.identity
                 };
    var promises = fileList.map(function(file) {
        return $http.post(url, file, config);
    });
    return $q.all(promises);
};

当发送带有File对象的POST时，重要的是设置'Content-Type': undefined。然后XHR发送方法将检测File对象并自动设置内容类型。

2017-08-09 21:14:07

这里的一些答案建议使用FormData()，但不幸的是，这是一个浏览器对象，在Internet Explorer 9及以下版本中不可用。如果您需要支持这些旧浏览器，您将需要一个备份策略，例如使用<iframe>或Flash。

已经有很多Angular.js模块来执行文件上传。这两种浏览器都明确支持旧浏览器:

https://github.com/leon/angular-upload -使用iframes作为备份 https://github.com/danialfarid/ng-file-upload -使用FileAPI/Flash作为备份

还有一些其他的选择:

https://github.com/nervgh/angular-file-upload/ https://github.com/uor/angular-file https://github.com/twilson63/ngUpload https://github.com/uploadcare/angular-uploadcare

其中一个应该适合你的项目，或者可能会给你一些关于如何自己编写代码的见解。

2013-12-10 21:50:00

这应该是对@jquery-guru的答案的更新/评论，但由于我没有足够的代表，它将在这里。它修复了现在由代码生成的错误。

https://jsfiddle.net/vzhrqotw/

变化主要是:

FileUploadCtrl.$inject = ['$scope']
function FileUploadCtrl(scope) {

To:

app.controller('FileUploadCtrl', function($scope)
{

如果需要，请随意搬到更合适的地方。

2015-03-27 01:05:50

你可以使用一个安全快速的FormData对象:

// Store the file object when input field is changed
$scope.contentChanged = function(event){
    if (!event.files.length)
        return null;

    $scope.content = new FormData();
    $scope.content.append('fileUpload', event.files[0]); 
    $scope.$apply();
}

// Upload the file over HTTP
$scope.upload = function(){
    $http({
        method: 'POST', 
        url: '/remote/url',
        headers: {'Content-Type': undefined },
        data: $scope.content,
    }).success(function(response) {
        // Uploading complete
        console.log('Request finished', response);
    });
}

2015-07-12 00:00:34

使用AngularJS上传文件

推荐文章

最新文章

标签