我正在尝试使用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
}
});
}
最佳答案
在您的 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>
关于javascript - Jquery选择图像然后获取长度未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44353405/