0

使用新的 HTML 5 File API，我试图将用户选择的文件传递给模板（使用 jsRender 渲染）。这是HTML：

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="http://borismoore.github.com/jsrender/jsrender.js"></script>
  <script>
    $(function() {
      $(':file').change(function() {
        //$('#files-placeholder').html($('#files-template').render({ files: [ { name: 'Test 1' }, { name: 'Test 2' } ] }));
        $('#files-placeholder').html($('#files-template').render({ files: this.files }));
      });
    });
  </script>
</head>
<body>
  <form>
    <input name="files" type="file" multiple="multiple" />
    <script id="files-template" type="text/x-jsrender">
      <ul>
        {{for files}}
          <li>{{>name}}</li>
        {{/for}}
      </ul>
    </script>
    <div id="files-placeholder"></div>
  </form>
</body>
</html>

但是它没有按预期工作。作为演示，如果您尝试使用注释掉的行渲染模板，那么它可以正常工作。

如果有人能告诉我我做错了什么，我将不胜感激。谢谢

4

1 回答 1

1

似乎模板引擎仅适用于真实数组，而不适用FileList于

我在这里修好了http://jsfiddle.net/4m3YQ/5/

像这样转换为数组：

[].slice.call(this.files)
于 2012-06-25T12:43:54.933 回答