Question

我想实现像http://www.html5rocks.com/en/tutorials/file/dndfiles/这样的文件上传器：

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

但是我无法弄清楚如何在我的ember视图中检索文件列表。我试过像：

App.Uploader = Em.View.extend({ files : [] })

使用模板：

<input type="file" {{bindAttr name="files"}} multiple>

但它不起作用。

任何想法？

此致

Jaonary

Answer 1

这是有效的，而且更具有内在性：

<script type="text/x-handlebars">
    {{#view App.FileSelectionView}}
        <input type="file" id="files" name="files[]" {{action "fileSelectionChanged" on="change"}} multiple/>
        <output id="list">
            <ul>
                {{#each files}}
                    <li><strong>{{name}}</strong> ({{type}}) - {{size}} bytes, last modified: {{date}}</li>
                {{/each}}
            </ul>
        </output>
    {{/view}}
</script>

<script type="text/javascript">
    App = Ember.Application.create();

    App.FileSelectionView = Ember.View.extend({
        files: null,

        fileSelectionChanged: function(evt) {
            var inputFiles = evt.target.files;
            var files = [];
            for (var i = 0, f; f = inputFiles[i]; i++) {
                files.pushObject({
                    name: escape(f.name),
                    type: f.type || 'n/a', 
                    size: f.size,
                    date: f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a'
                });
            }
            this.set('files', files);
        }
    });
</script>

您必须使用一个方法创建一个视图，该方法将处理输入的change事件。之后，你已经完成了...你可以通过把手模板中的ember绑定来渲染每个文件。

Ember.View中的输入属性绑定

1 个答案: