最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Uncaught TypeError: Cannot read property 'files' of null of element - Stack Overflow

programmeradmin2浏览0评论

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).

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:

Uncaught TypeError: Cannot read property 'files' of null

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

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:

<div class="chat_w" 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="in" 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:

var filemsg = name.files[0];

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

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).

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:

Uncaught TypeError: Cannot read property 'files' of null

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

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:

<div class="chat_w" 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="in" 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:

var filemsg = name.files[0];

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

Share Improve this question edited Nov 26, 2017 at 14:17 aaron 43.1k6 gold badges53 silver badges111 bronze badges asked Nov 26, 2017 at 13:48 HanaseHanase 291 gold badge1 silver badge7 bronze badges 2
  • 2 getElementById() expects the 'id' as string without the jQuery selector #. So remove the # -> document.getElementById('browse_'+chat_id); – Jeff Commented Nov 26, 2017 at 13:51
  • 1 but since you already use jQuery you could also do it using that like so: name=$('#browse_'+chat_id); – Jeff Commented Nov 26, 2017 at 13:54
Add a ment  | 

1 Answer 1

Reset to default 3

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

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

Or use the jQuery selector method:

var name=$('#browse_'+chat_id);
发布评论

评论列表(0)

  1. 暂无评论