javascript 未捕获的类型错误:无法读取元素 null 的属性“文件”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/47496826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-29 07:24:37  来源:igfitidea点击:

Uncaught TypeError: Cannot read property 'files' of null of element

javascriptjqueryhtmlform-data

提问by Hanase

I am creating a little website that has chats on it. Currently, one can only send text messages and I wanted to open a file sender as well for sending image(s), video(s), gif(s).

我正在创建一个包含聊天内容的小网站。目前,一个人只能发送短信,我想打开一个文件发送器来发送图像、视频、gif(s)。

I have encountered a few problems along the way, but so far got everything without the support of others. However, I am in great need of it now.

一路上我遇到了一些问题,但到目前为止一切都没有别人的支持。但是,我现在非常需要它。

By using FormData, Ajax and jQuery, I am able to have real-time images sent from the client to the PHP server. The problem that I am facing is:

通过使用FormData、Ajax 和 jQuery,我能够将实时图像从客户端发送到 PHP 服务器。我面临的问题是:

Uncaught TypeError: Cannot read property 'files' of null

未捕获的类型错误:无法读取 null 的属性“文件”

when trying to append a file to formData. Take a look:

尝试将文件附加到formData. 看一看:

function opencraze() {
    $(".browse_send_file").change(function () {
        var chat_id = "123";
        var formData = new FormData();

        formData.append("chat_id", chat_id);

        var name = document.getElementById('#browse_' + chat_id);
        var filemsg = name.files[0];
        formData.append("userfile", filemsg);
    });
}

The HTML:

HTML:

<div class="chat_wcom" style="width: 25%;">
    <label for="browse_123" class="material-icons"></label>
    <input type="file" class="browse_send_file" id="browse_123" name="browse_send_file" style="display: none">
    <input maxlength="140" type="text" id="input_123" class="comin" placeholder="My message..." name="sendmsg" onkeypress="g(event,123)" autocapitalize="off" autocorrect="off" style="width: auto;">
    <input class="hidden_index" type="text" value="123" name="chat_index">
</div>

What happens before everything is that when the user clicks on a div, this HTML above is generated and once it is generated, it calls the opencraze()function. Now, if one presses on the label of the chat, one selects the file and it activates the .change()jQuery function. The error is on the line of:

发生在一切之前的事情是,当用户单击 a 时div,会生成上面的 HTML,一旦生成,它就会调用该opencraze()函数。现在,如果按下聊天标签,则选择该文件并激活.change()jQuery 功能。错误在于:

var filemsg = name.files[0];

Any help would be appreciated. Thank you for your time.

任何帮助,将不胜感激。感谢您的时间。

回答by Jeff

The native javascript document.getElementById()expects the 'id' as string without the jQuery selector #.
So remove the #:

本机 javascript document.getElementById()期望 'id' 作为没有 jQuery selector 的字符串#
所以删除#:

var name = document.getElementById('browse_'+chat_id);

Or use the jQuery selectormethod:

或者使用jQuery 选择器方法:

var name=$('#browse_'+chat_id);