10

ファイルを選択するには、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

4 に答える 4

14

これを実際に示すために、本格的な例を完成させました

https://github.com/toranb/ember-file-upload

これが基本的なハンドルバーのテンプレートです

<script type="text/x-handlebars" data-template-name="person">
{{view PersonApp.UploadFileView name="logo" contentBinding="content"}}
{{view PersonApp.UploadFileView name="other" contentBinding="content"}}
<a {{action submitFileUpload content target="parentView"}}>Save</a>
</script>

カスタム ファイル ビュー オブジェクトは次のとおりです。

PersonApp.UploadFileView = Ember.TextField.extend({
    type: 'file',
    attributeBindings: ['name'],
    change: function(evt) {
      var self = this;
      var input = evt.target;
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        var that = this;
        reader.onload = function(e) {
          var fileToUpload = reader.result;
          self.get('controller').set(self.get('name'), fileToUpload);
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
});

コントローラーはこちら

PersonApp.PersonController = Ember.ObjectController.extend({
  content: null,
  logo: null,
  other: null
});

そして最後に、送信イベント付きのビューです

PersonApp.PersonView = Ember.View.extend({
  templateName: 'person',
  submitFileUpload: function(event) {
    event.preventDefault();
    var person = PersonApp.Person.createRecord({ username: 'heyo', attachment: this.get('controller').get('logo'), other: this.get('controller').get('other') });
    this.get('controller.target').get('store').commit();
  }
});

djangoアプリを起動すると、ファイルシステムに2つのファイルがドロップされます

于 2012-12-18T14:06:30.623 に答える
1

Marek Fajkus JQuery の .serialize は使用できません。JQuery UI docsのドキュメントでファイルのアップロードについて言及していません。

ただし、 JQuery Upload Pluginを使用できます

実際にはそれについて言及しています。「.ファイル選択要素からのデータはシリアル化されていません。」

于 2015-05-25T09:47:46.647 に答える