Rails и загрузка файла ajax - невозможно прочитать свойство 'innerHTML' нулевой ошибки

Ответ 1

Это старо, но я нашел реальное решение этого. Измените свой запрос в application.js на //=require jquery-fileupload/basic вместо //= require jquery-fileupload.

Ответ 2

Причина, по которой вы получаете эту ошибку, состоит в том, что вам не хватает тега script id = "template-upload" или id = "template-download" или оба.

Пример из Demo at: 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>

Версия пользовательского интерфейса зависит от обоих присутствующих шаблонов.

У меня была такая же проблема и я решил проверить, чего не хватает.

Надеюсь, что это поможет.

Ответ 3

Я столкнулся с этой проблемой. Однако загрузка базовой версии плагина для загрузки файлов не была для меня вариантом, поскольку я использую предварительный просмотр для одной загрузки, но не для другой. Вы можете отключить функциональность "предварительного просмотра" и попытку обработки template-upload и template-download в каждом конкретном случае, установив параметры uploadTemplateId и downloadTemplateId для плагина для загрузки файлов в null.

Ответ 4

Сообщение об ошибке сообщает нам, что document.getElementById(id) возвращает null, поэтому в документе нет элемента с указанным id.

Для отладки попробуйте добавить вызов console.log(id); перед оператором return. После этого вы можете найти значение id, которое вызывает проблему. Надеемся, что ошибка является результатом простой опечатки, помните, что значение id чувствительно к регистру. Если опечатка не является проблемой, вы можете, по крайней мере, установить условную точку останова, так как теперь вы знаете значение id, которое хотите разбить. После удара точки останова это просто переход к вызывающим функциям, чтобы "увидеть, какая часть кода запускает эту функцию". Надеюсь, это поможет.

Ответ 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

в git синимца. как вы могли видеть здесь

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

путь изменился в этом файле.

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

Я перешел на правильный путь и его работы. надеюсь, что этот ответ поможет кому-то здесь получить такую ​​же проблему.