Page 220 - AngularJS权威教程

200 第 18 章 服务器通信

定位到这个bucket之后，我们在它上面点击，加载Properties选项卡，展开Permissions选项。
从这里，我们点击Add CORS configuration按钮，选择标准的CORS配置，如图18-16所示。

图18-16 在S3 bucket上启用CORS

我们要创建一个简单的文件上传指令，提供一个用HTML5 File API来处理文件上传的方法。
这样，当用户选择一个文件时，文件上传会立即开始。

为了处理文件选择指令，我们创建一个简单的指令绑定到change事件上，并且在文件被选择
之后调用一个方法。
这个指令很简单，如下所示：

// ...
.directive('fileUpload', function() {
return {
restrict: 'A',
scope: { fileUpload: '&' },
template: '<input type="file" id="file" /> ',
replace: true,
link: function(scope, ele, attrs) {
ele.bind('change', function() {
var file = ele[0].files;
if (file) scope.fileUpload({files: file});
})
}
}
})
我们可以这样在视图中使用这个指令，如下所示：

<!-- ... -->
<div class="row"
<div class="col-md-12">
<div file-upload="onFile(files)"></div>
</div>
</div>
现在，当作出文件选择的时候，它就会调用当前作用域上的onFile(files)方法。

尽管在这里我们正在创建自己的文件指令，还是推荐查验一下ngUpload [https://
github.com/twilson63/ngUpload]，以处理文件上传。