首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用AngularJS上传文件

使用AngularJS上传文件
EN

Stack Overflow用户
提问于 2013-09-02 10:29:52
回答 28查看 836.5K关注 0票数 307

以下是我的HTML表单:

代码语言:javascript
复制
<form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

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

当我试图打印$scope.file的值时,它是未定义的。

EN

Stack Overflow用户

发布于 2015-02-03 10:21:17

使用指令很容易

Html:

代码语言:javascript
复制
<input type="file" file-upload multiple/>

联署材料:

代码语言:javascript
复制
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] });
            }                                       
        });
    }
};

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

在您的控制器中:

代码语言:javascript
复制
$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调用中:

代码语言:javascript
复制
data: { model: $scope.model, files: $scope.files }

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

票数 7
EN
查看全部 28 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18571001

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档