[英]Nothing happens when I click on the “Upload” button
下面是我的javascript代码,我想发生的是,当用户单击表单中的“上传”按钮时,它会在“ imageValidation”中进行检查,以查看文件输入是否正确,如果正确,那么它将到“ startImageUpload()”函数上,如果文件输入不正确,则应显示一条警告,指出“不是图像”,并且不应转到“ startImageUpload”函数。
问题在于它根本没有这样做。 当用户单击“上传”按钮时,则不会显示任何警报,也不会发生上传,也不会发生任何事情。 我需要什么才能实现上面的段落?
形式如下:
var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='imageClickHandler(this); return false;' class='imageuploadform' >" +
"<label> Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/>" +
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label></form>");
下面是用户单击“上传”按钮时遵循的以下功能:
function imageClickHandler(){
if(imageValidation()){
startImageUpload(imageuploadform);
}
}
下面是imageValidation()函数,该函数在其中验证文件输入,但是我不知道这是否正常工作?
function imageValidation() {
$(".fileImage").change(function() {
var val = $(this).val();
switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
case 'gif': case 'jpg': case 'png':
return true;
break;
default:
$(this).val('');
// error message here
alert("not an image");
return false;
break;
}
});
}
下面是“ startImageUpload()”函数,在尝试验证输入文件之前,我知道它可以正常工作。
function startImageUpload(imageuploadform){
$(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
$(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
$(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
sourceImageForm = imageuploadform;
return true;
}
您的onsubmit
总是返回false
...
更改它以返回imageClickHandler
的结果
<form .... onsubmit="return imageClickHandler(this);">
并将JS函数更改为返回值
function imageClickHandler(form){
if(imageValidation()){
return startImageUpload(form);
}
return false;
}
还-确保您的imageValidation
函数具有默认返回值(在函数的最后一行添加return false;
)
为了防止在用户选择文件时发生验证,请删除对change事件的侦听,然后将验证更改为:
function imageValidation() {
var val = $(".fileImage").val();
switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
case 'gif':
case 'jpg':
case 'png':
return true;
default:
$(".fileImage").val('');
// error message here
alert("not an image");
return false;
}
return false;
}
有几件事。 首先,验证的结果可能会触发以下两种结果之一:执行或发出警报。 但是警报的结果位于validate函数内部,而不是返回使用result返回的结果之后的顶部。 建议将其上移并使用if-then-else。 代码风格的东西。
其次,imageClickHandler使用一个名为imageuploadform的JS对象。 在任何地方都看不到这样的JS对象。 有一个dom元素,上面附加了imageuploadform类。 但这不是同一回事。 不会显示整个html / js。
第三,将参数传递给imageClickHandler,但函数定义未定义任何参数。 目的是什么?
如果遇到问题,请尝试将警报消息临时散布到各处,以跟踪程序的执行情况。 那可能会告诉您执行将要执行或不执行。
正如Yaron所说,如果startUpload没有在后台进行实际的上传,那么您必须从onClick返回可能为“ true”的结果。 返回“ false”将确保它永远不会进入php页面。
function imageClickHandler(){
var imageuploadform = $('form.imageuploadform').get(0);
if(imageValidation()){
startImageUpload(imageuploadform);
return true;
}
else {
alert("not an image");
return false;
}
}
function imageValidation() {
$(".fileImage").change(function() {
var val = $(this).val();
switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
case 'gif': case 'jpg': case 'png':
return true;
break;
default:
return false;
break;
}
});
}
var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler();' class='imageuploadform' >" +
"<label> Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/>" +
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label></
您是否尝试过将开关从验证中完全删除,并仅出于测试目的返回alert()?
可能是您的'val'变量与jQuery val()混淆了吗? 尝试使用其他var名称?
var val = $(this).val();
$(this).val('');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.