Rails和ajax文件上传 - 无法读取属性'innerHTML'的null错误

Question

我正在开发一个带有动态模块的Rails应用程序 - ajax - 图像上传到图库.我正在基于这个应用程序 - 多文件上传 - 演示.我不是很喜欢Javascript和东西,所以我从该实现中复制了很多逻辑.

我根据rounders demo的所有逻辑构建了我的应用程序,我已经包含了所有的gems和javascript库,并且出现了错误:

Uncaught TypeError: Cannot read property 'innerHTML' of null 

在chrome控制台中,它引用了tmpl.js文件

tmpl.load = function (id) {
    return document.getElementById(id).innerHTML;
};

我对JS的了解并没有让我明白哪一段代码触发了这个功能,所以我可以更进一步.

你能告诉我调查这个问题根源的下一步是什么？我预计潜在的原因可能会有所不同,所以我不想粘贴应用程序中的所有代码.

Answer 1

这已经过时了,但我找到了一个实际的解决方案.将您的要求更改application.js为//=require jquery-fileupload/basic而不是//= require jquery-fileupload.

Answer 2

您收到此错误的原因是您缺少脚本标记id ="template-upload"或id ="template-download"或两者.

演示中的示例:http://blueimp.github.com/jQuery-File-Upload/

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>Start</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancel</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
            </td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td colspan="2"></td>
        {% } %}
        <td class="delete">
            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                <i class="icon-trash icon-white"></i>
                <span>Delete</span>
            </button>
            <input type="checkbox" name="delete" value="1">
        </td>
    </tr>
{% } %}
</script>

UI版本取决于存在的这些模板.

我遇到了同样的问题,并决定检查丢失的内容.

希望有所帮助.

Answer 3

我也遇到了同样的问题.但是,加载基本版本的文件上传插件对我来说不是一个选项,因为我使用预览进行一次上传,而不是另一次上传.您可以通过设置文件上传插件的和选项来禁用"预览"功能以及尝试处理template-upload和template-download逐个处理.uploadTemplateIddownloadTemplateIdnull

Answer 4

错误消息告诉我们正在document.getElementById(id)返回null，因此文档中当前没有具有指定的元素id.

console.log(id);要进行调试，请尝试在语句之前添加对 的调用return。id一旦你这样做了，你就可以找到导致问题的价值。希望该错误是由简单的拼写错误造成的，请记住 的值区分id大小写。如果拼写错误不是问题，您至少可以设置一个条件断点，因为您现在知道id要中断的值。到达断点后，只需单步执行调用函数即可“查看哪段代码触发了该函数”。希望这可以帮助。