2012-06-25 106 views
0

使用新的HTML 5 File API,我试图将用户选择的文件传递给模板(使用jsRender呈现)。这里是HTML:HTML 5 FileList - jsRender

<!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> 

然而,它不能按预期工作。为了演示如果您尝试使用注释掉的线渲染模板,那么它可以正常工作。

如果有人能告诉我我做错了什么,我将不胜感激。由于

+0

你得到任何错误?不工作是什么意思? – Esailija

+0

我用一个项目呈现一个列表。我将编辑我的问题,让您更容易测试。 – nfplee

+0

如果可能,制作一个[jsfiddle](http://jsfiddle.net/) – Esailija

回答

1

似乎模板引擎适用于真正的数组只,而不是FileList小号

我固定在这里http://jsfiddle.net/4m3YQ/5/

转换为数组是这样的:

[].slice.call(this.files) 
+0

谢谢工作! – nfplee