javascript – jQuery文件上传.无法读取null的属性’innerHTML’

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – jQuery文件上传.无法读取null的属性’innerHTML’，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3549字，纯文字阅读大概需要6分钟。

内容图文

我正在尝试在我的项目中使用blueimp的jQuery文件上传插件.这在Basic Plus版本中非常完美,我可以在服务器上加载文件,但是当我尝试使用Basic Plus UI(link)时,我收到错误：

tmpl.min.js:1 Uncaught TypeError: Cannot read property 'innerHTML' of null
    at Function.n.load (http://127.0.0.1:8000/static/cp/file_upload/tmpl.min.js:1:324)
    at n (http://127.0.0.1:8000/static/cp/file_upload/tmpl.min.js:1:208)
    at n (http://127.0.0.1:8000/static/cp/file_upload/tmpl.min.js:1:204)
    at $.(anonymous function).(anonymous function)._initTemplates (http://127.0.0.1:8000/static/cp/file_upload/jquery.fileupload-ui.js:661:46)
    at $.(anonymous function).(anonymous function)._initTemplates (http://127.0.0.1:8000/static/cp/file_upload/vendor/jquery.ui.widget.js:127:25)
    at $.(anonymous function).(anonymous function)._initSpecialOptions (http://127.0.0.1:8000/static/cp/file_upload/jquery.fileupload-ui.js:681:18)
    at $.(anonymous function).(anonymous function)._initSpecialOptions (http://127.0.0.1:8000/static/cp/file_upload/vendor/jquery.ui.widget.js:127:25)
    at $.(anonymous function).(anonymous function)._create (http://127.0.0.1:8000/static/cp/file_upload/jquery.fileupload.js:1390:18)
    at $.(anonymous function).(anonymous function)._create (http://127.0.0.1:8000/static/cp/file_upload/vendor/jquery.ui.widget.js:127:25)
    at $.(anonymous function).(anonymous function)._super (http://127.0.0.1:8000/static/cp/file_upload/vendor/jquery.ui.widget.js:114:36)

以下是我项目中js要求的顺序：

vendor/jquery.ui.widget.js
JavaScript-Templates/js/tmpl.min.js
JavaScript-Load-Image/js/load-image.all.min.js
canvas-to-blob.min.js
jquery.iframe-transport.js
jquery.fileupload.js
jquery.fileupload-process.js
jquery.fileupload-image.js
jquery.fileupload-validate.js
jquery.fileupload-ui.js

实际上,即使我从示例中复制/粘贴源代码,我也会收到此错误消息.

编辑：

这是HTML代码：

<input id="fileupload" type="file" name="files[]" class="form-control" multiple>
<div id="files" class="files"></div>

javascript(从blueimp示例复制)：

$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: '{% url 'add_request' %}',
    });

    // Enable iframe cross-domain access via redirect option:
    $('#fileupload').fileupload(
        'option',
        'redirect',
        window.location.href.replace(
            /\/[^\/]*$/,
            '/cors/result.html?%s'
        )
    );

    if (window.location.hostname === 'blueimp.github.io') {
        // Demo settings:
        $('#fileupload').fileupload('option', {
            url: '//jquery-file-upload.appspot.com/',
            disableImageResize: /Android(?!.*Chrome)|Opera/
                .test(window.navigator.userAgent),
            maxFileSize: 999000,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
        });
        // Upload server status check for browsers with CORS support:
        if ($.support.cors) {
            $.ajax({
                url: '//jquery-file-upload.appspot.com/',
                type: 'HEAD'
            }).fail(function () {
                $('<div class="alert alert-danger"/>')
                    .text('Upload server currently unavailable - ' +
                            new Date())
                    .appendTo('#fileupload');
            });
        }
    } else {
        // Load existing files:
        $('#fileupload').addClass('fileupload-processing');
        $.ajax({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            url: $('#fileupload').fileupload('option', 'url'),
            dataType: 'json',
            context: $('#fileupload')[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), {result: result});
        });
    }

});

解决方法:

解决了.问题不在javascript中.我在模板中使用django标签.所以我不得不将JavaScript-Templates标签放入{％verbatim％} django标签中.
大家好.

内容总结

以上是互联网集市为您收集整理的javascript – jQuery文件上传.无法读取null的属性’innerHTML’全部内容，希望文章能够帮你解决javascript – jQuery文件上传.无法读取null的属性’innerHTML’所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端