我需要创建一个Ember组件来选择文件。我的页面将包括多个“上传组件”
我读过一篇文章试图实现这一点:(https://stackoverflow.com/questions/9200000/file-upload-with-ember-data)但是UploadFileView直接链接到控制器。我想有更通用的东西...
我希望从视图中删除App.StoreCardController.set('logoFile '..')依赖项或从模板中传递字段(logoFile)...
有什么想法来改进这段代码吗?
App.UploadFileView = Ember.TextField.extend({
type: 'file',
attributeBindings: ['name'],
change: function(evt) {
var self = this;
var input = evt.target;
if (input.files && input.files[0]) {
App.StoreCardController.set('logoFile', input.files[0]);
}
}
});
和模板:
{{view App.UploadFileView name="icon_image"}}
{{view App.UploadFileView name="logo_image"}}
4条答案
按热度按时间57hvy0tb1#
我完成了一个完整的示例来演示这一点
https://github.com/toranb/ember-file-upload
这是基本的车把模板
下面是自定义文件视图对象
这里是控制器
最后是带有提交事件的视图
如果你启动django应用程序,这将在文件系统上放置2个文件
eit6fx6z2#
编辑(2015.06):刚基于组件创建了一个新的解决方案。此解决方案提供了一个带有预览和删除图标的上载按钮。P.S.
fa
类为Font Awesome部件把手
组件JavaScript
用法示例
旧答案
我以Chris Meyers为例,把它做得很小。
模板
JavaScript语言
gijlo24d3#
Marek Fajkus,您不能使用JQuery的.serialize,它在JQuery UI docs的文档中没有提到文件上载
但是,您可以使用JQuery Upload Plugin
实际上它确实提到了这一点,它说:“.来自文件选择元素得数据未序列化.”
b4lqfgs44#
如果要上传多个文件,您可能需要使用
这是一个您将在正常HTML上载中使用的解决方案。
此外,您还可以使用
'valueBinding'
,这将允许您针对组件中的该值设置观察器。