javascript - Jquery选择图像然后获取长度未定义

Question

我正在尝试使用jquery制作上传图像系统。但我越来越

Uncaught TypeError: Cannot read property 'length' of undefined

我收到错误的代码如下。当我单击 #imageInput 按钮，然后在单击“确定”按钮后选择一个图像时，我收到 Can not read property 'length' of undefined 错误从开发人员控制台。我在这里做错了什么任何人都可以在这方面帮助我吗？

HTML 结构

<li id="box_devstud" class="tab active-chat" client="devstud" style="bottom: 0px; right: 230px;"></li>
<input id="imageInput" type="file" name="file" onchange="uploadimage('devstud');">
<input id="to_id" name="to_id" value="11" type="hidden">
<input id="to_uname" name="to_uname" value="devstud" type="hidden">
<input id="from_uname" name="from_uname" value="Beenny" type="hidden">

这里是我的 JavaScript 代码

function uploadphoto(thisuser) {

        var file_name=$("#box_"+thisuser+" #imageInput").val();
        var fileName = $("#box_"+thisuser+" #imageInput").val();
        var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);

        var toid = $("#box_"+thisuser+" #to_id").val();
        var tun = $("#box_"+thisuser+" #to_uname").val();
        var fun = $("#box_"+thisuser+" #from_uname").val();

        var siteurl = 'requests/postprog.php?toid='+toid+'&tun='+tun+'&fun='+fun;
        var file_data=$("#box_"+thisuser+" #imageInput").prop("files")[0];
        var form_data=new FormData();
        form_data.append("file",file_data);

        $('#loadmsg_'+thisuser).show();      // Loader show

        $.ajax({
            type:"POST",
            url: siteurl,
            cache:false,
            contentType:false,
            processData:false,
            data:form_data,
            success:function(data){
                //alert(data);
                $.each(data.items, function(i,item){
                    if (item)   { // fix strange ie bug
                        chatboxtitle = item.chatboxtitle;
                        filename = item.filename;
                        path = item.path;

                        $('#loadmsg_'+chatboxtitle).hide();     // Loader hide

                        var message_content = "<a url='"+path+"' onclick='trigq(this)'><img src='"+filename+"' style='max-width:156px;min-height:100px;padding: 4px 0 4px 0; border-radius: 7px;cursor: pointer;'/></a>";
                        $("#box_"+chatboxtitle+" .chatboxcontent").append('<div class="chatboxmessage direct-chat-msg right"><div class="direct-chat-info clearfix"><span class="direct-chat-name pull-right">'+item.sender+'</span></div><img class="direct-chat-img" src="storage/user_image/'+img+'" alt="message user image"><span class="direct-chat-text">'+message_content+'</span></div>');
                    }

                    setTimeout(scrollDown(chatboxtitle), 5000);
                });
            },
            error:function(){
                //Do something
            }
        });
    }

Answer 1

在您的 fileName 中变量，你已经像这样调用你的 DOM 元素

function uploadphoto(thisuser) {
    var fileName = $("#box_"+thisuser+" #imageInput").val();
    // Rest of code ....
}

来自您给出的html代码片段，您已放置 #imageInput输入文件 <li> 之外标签。

请将您的输入文件放入li内标签，以便您现在可以调用 DOM 元素

<li id="box_devstud" class="tab active-chat" client="devstud" style="bottom: 0px; right: 230px;">
    <input id="imageInput" type="file" name="file" onchange="uploadimage('devstud');">
    <input id="to_id" name="to_id" value="11" type="hidden">
    <input id="to_uname" name="to_uname" value="devstud" type="hidden">
    <input id="from_uname" name="from_uname" value="Beenny" type="hidden">
</li>