Javascript HTML5文件列表-jsRender_Javascript_Jquery_Jsrender

Javascript HTML5文件列表-jsRender

javascript jquery

Javascript HTML5文件列表-jsRender,javascript,jquery,jsrender,Javascript,Jquery,Jsrender,使用新的HTML5文件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"><

使用新的HTML5文件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>


$（函数（）{
$（':file'）.change（函数（）{
//$（“#文件占位符”）.html（$（“#文件模板”）.render（{files:[{name:'Test 1'}，{name:'Test 2'}]）；
$（“#文件占位符”）.html（$（“#文件模板”）.render（{files:this.files}））；
});
});

{{对于文件}}
{{>name}
{{/for}}

然而，它并没有像预期的那样工作。为了演示，如果您尝试使用注释掉的行渲染模板，则效果良好

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

看来模板引擎只适用于实际数组，而不是

文件列表

我在这里修好了

按如下方式转换为数组：

[].slice.call(this.files)

你有什么错误吗？你说不工作是什么意思？我用一个项目呈现一个列表。我会修改我的问题，让你更容易测试。如果可能的话，做一个测试-希望这有帮助。