Jquery Bild auswählen, dann Länge undefiniert

Question

Ich versuche ein Upload-Bildsystem mit jquery zu erstellen. Aber ich bekomme

Uncaught TypeError: Cannot read property 'length' of undefined

Die Codes, die ich den Fehler habe, sind unten. Wenn ich auf die Schaltfläche #imageInput klicke und dann ein Bild nach dem Klick auf OK wähle, bekomme ich die Eigenschaft 'Länge' eines nicht definierten Fehlers von der Entwicklerkonsole nicht lesen können. Was ich hier falsch mache kann mir hier jemand helfen?

HTML-Struktur

<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"> 

mein Javascript-Code hier

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

In Ihrem fileName Variable, haben Sie Ihr DOM-Element nennen wie diese

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

Von Ihrem angegebenen Code-Snippet html haben Sie Ihre #imageInput Eingabedatei außerhalb Ihrer <li>-Tags platziert.

platzieren bitte Ihre Eingabedatei innerhalb li Tag, so dass Sie Ihre DOM-Element aufrufen können jetzt

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