jQuery 文件上传。无法读取 null 的属性“innerHTML”

Posted 2023-05-07

【中文标题】jQuery 文件上传。无法读取 null 的属性“innerHTML”

【英文标题】：jQuery File Upload. Cannot read property 'innerHTML' of null

【发布时间】：2018-06-09 17:10:45

【问题描述】：

我正在尝试在我的项目中使用 blueimp 的 jQuery File Upload 插件。这在 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);
        );
    

);

【问题讨论】：

发布您正在使用的相关代码本身

@a-wolff 刚刚编辑了我的帖子

@umaru 你在哪里使用过'innerHTML'？

@nitin-dhomse 这是来自 JavaScript-Templates/js/tmpl.min.js github.com/blueimp/JavaScript-Templates

【参考方案1】：

解决了。问题不在javascript中。我在模板中使用 django 标签。所以我不得不将 JavaScript-Templates 标签放入 % verbatim % django 标签中。 谢谢大家。