Question

我正在开发一个带有动态模块的Rails应用程序 - ajax - 图像上传到图库。我是在this app - multi-file-upload-demo的基础上做的。我不是很喜欢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选项，逐个停用“预览”功能并尝试处理uploadTemplateId和downloadTemplateId -upload插件到null。

Answer 4

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

的元素

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

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

我改变了正确的道路及其作品。希望这个答案可以帮助那些遇到同样问题的人。

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

5 个答案: