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

Question

我正在开发一个Rails应用程序，其中包含一个动态 - ajax - 图片上传到画廊的模块。 我是基于此应用程序-multi-file-upload-demo进行开发的。 我不太熟悉JavaScript等内容，因此我从那个实现中复制了很多逻辑。

我按照rounders演示中的所有逻辑构建了我的应用程序，包括所有宝石和Javascript库，但我收到了一个错误：

Uncaught TypeError: Cannot read property 'innerHTML' of null 

在Chrome控制台中，"tmpl.js文件"指的是什么？

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

我的JS知识无法明确告诉我哪一段代码会触发该函数，因此我无法进一步处理。

你能否建议我下一步调查问题的来源？我预计可能存在各种潜在原因，因此不想粘贴应用程序中的所有代码。

- Maciek Simm

Answer 1

这虽然是旧内容，但我找到了一个实际的解决方案。将application.js中的require更改为//=require jquery-fileupload/basic而不是//= require jquery-fileupload。

- BlakeWilliams

---

非常感谢@BlakeWilliams！顺便说一句，这应该被标记为正确的回答... - Andrea Salicetti

看起来现在运作正常，现在我需要检查所有与文件上传相关的功能是否正常... 我想知道 require jquery-fileupload/basic 和 jquery-fileupload 之间的区别，以避免出现意外。 - Albert Català

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版本取决于这两个模板是否存在。

我曾经遇到过同样的问题，决定检查缺少什么。

希望能有所帮助。

- Bill Billingson

Answer 3

我也遇到了同样的问题。然而，对于我来说，加载文件上传插件的基本版本不是一个选项，因为我只在其中一个上传中使用预览功能，而另一个上传则不需要。您可以通过将文件上传插件的 uploadTemplateId 和 downloadTemplateId 选项设置为 null 来逐案例禁用“预览”功能以及尝试处理 template-upload 和 template-download。

- Vivin Paliath

---

谢谢，顺便说一下这是最佳的“稳定”解决方案。 - nothing-special-here

Answer 4

错误信息告诉我们，document.getElementById(id) 返回了 null，因此文档中没有指定 id 的元素。

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

- gowansg

---

这对我有用，因为我仔细查看了我的脚本标签的ID，发现了一个打字错误。 - thorne51

Answer 5

我使用这个插件已经几个月了，今天我注意到文件上传没有起作用，并且出现了一个错误。

"cannot read property 'innerHTML' of null error".

我研究了一下，原因很简单。文件路径。

http://blueimp.github.io/JavaScript-Load-Image/js/load-image.min.js

改为

http://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js

在blueimp的git中，您可以在此处看到。

https://github.com/blueimp/jQuery-File-Upload

这个文件中的路径已经改变。

https://github.com/blueimp/jQuery-File-Upload/blob/master/index.html

我更改了正确的路径，它可以工作。 希望这个答案能帮助到有同样问题的人。

- BenB