极其简单的AngularJs文件选择对话框

17 浏览
0 Comments

极其简单的AngularJs文件选择对话框

我不知道如何获取从元素返回的文件名的值。

这个fiddle看起来非常简单。它弹出一个文件选择对话框，甚至显示所选文件的名称。但是，我不知道如何将该文件名作为$scope变量获取到。

有人能否将其添加到fiddle中，或者发布或指导我一个非常简单的代码示例？

0

1 答案

0 Comments

在你的实际代码中，$scope.myFile.name将包含文件名。这个变量通过你定义的指令fileModel与file-model绑定到标签上。

<div ng-controller = "myCtrl">
    文件名：{{myFile.name}}<br>
    <input type="file" file-model="myFile"/>
    <button ng-click="uploadFile()">上传文件</button>
</div>


$scope.uploadFile = function(){
    var file = $scope.myFile; // $scope.myFile is set buy the directive
    console.log('file is ' + $scope.myFile.name ); 
    var uploadUrl = "/fileUpload";
    fileUpload.uploadFileToUrl(file, uploadUrl);
};

请问您是如何知道的？

你的初始代码已经包含了答案，第39行的console.dir(file)清楚地显示了file.name包含的文件名。至于ng-model="filename"，这是AngularJS的工作原理。要说这个输入框与这个变量绑定，你使用ng-model="varname"，如果你不知道这一点，我觉得你应该阅读官方的Angular教程，你会节省很多时间，并看到很多好的特性：https://docs.angularjs.org/tutorial/step_00 最好的祝福

我看不到$scope.filename和file.name之间的联系，后者不在$scope中。而且它是file DOT name，所以与$scope.filename没有关系

它们之间没有联系，我读得太快了你的代码，并添加了另一个变量绑定，这是多余的，因为已经有一个变量通过同名的指令file-model绑定到输入框上。我编辑了答案

它似乎还没有更新$scope.myFile（我甚至需要那个指令吗？我不明白为什么它说myApp.directive('fileModel'而在file-model="myFile"中使用了连字符）

这是Angular的自动机制，它将驼峰命名（指令名为fileModel）转换为HTML属性中的file-model。我总是使用简单的减号来避免这个问题。编辑：这里有一些阅读材料，有更多解释：http://adndevblog.typepad.com/cloud_and_mobile/2015/08/should-we-use-camelcase-or-dash-delimited-in-angularjs.html

这非常有帮助（我是新手，对于指令一点都不了解）。这是一个很好的答案和解释，为本站树立了榜样。

很高兴能帮到你。指令非常强大，关于如何向指令传递数据（字符串/对象、函数等），这里有一个小提示：http://pastebin.com/VBkhbt4b

0