Javascript 当我点击"；上传“；按钮

下面是我的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>");

下面是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;
}  

---

您是否尝试过将开关完全从验证中移除，并仅返回一个警报（）以进行测试

您的变量“val”是否将自己与jQuery val（）混淆？尝试使用不同的变量名

  var val = $(this).val();
            $(this).val('');

---

您是否尝试过将开关完全从验证中移除，并仅返回一个警报（）以进行测试

您的变量“val”是否将自己与jQuery val（）混淆？尝试使用不同的变量名

  var val = $(this).val();
            $(this).val('');

---

有几件事。首先，验证的结果可能触发两种结果之一：DoIt或alert。但是警报的结果在validate函数中是向下的，而不是在使用result is return返回结果之后向上的。建议将其向上移动并使用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></ 

函数imageClickHandler（）{
var imageuploadform=$（'form.imageuploadform'）.get（0）；
如果（imageValidation（））{
startImageUpload（图像上传表单）；
返回true；
} 
否则{
警报（“非图像”）；
返回false；
} 
}
函数imageValidation（）{
$（“.fileImage”）.change（函数（）{
var val=$（this.val（）；
开关（val.substring（val.lastIndexOf（'.'）+1.toLowerCase（））{
案例'gif'：案例'jpg'：案例'png'：
返回true；
打破
违约：
返回false；
打破
} 
}); 
}
var$fileImage=$（“”+
“图像文件：
”+
“有几件事。首先，验证的结果可能会触发两种结果之一：do it，或alert。但是alert的结果在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></ 

函数imageClickHandler（）{
var imageuploadform=$（'form.imageuploadform'）.get（0）；
如果（imageValidation（））{
startImageUpload（图像上传表单）；
返回true；
} 
否则{
警报（“非图像”）；
返回false；
} 
}
函数imageValidation（）{
$（“.fileImage”）.change（函数（）{
var val=$（this.val（）；
开关（val.substring（val.lastIndexOf（'.'）+1.toLowerCase（））{
案例'gif'：案例'jpg'：案例'png'：
返回true；
打破
违约：
返回false；
打破
} 
}); 
}
var$fileImage=$（“”+
“图像文件：
”+
“您的
onsubmit
始终返回
false

将其更改为返回
imageClickHandler的结果

 <form .... onsubmit="return imageClickHandler(this);">

另外-确保
imageValidation
函数具有默认返回值（在函数的最后一行添加
return false；
）

编辑：
为了防止在用户选择文件时发生验证，请删除侦听更改事件，并将验证更改为：

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

您的
onsubmit
始终返回
false

将其更改为返回
imageClickHandler的结果

 <form .... onsubmit="return imageClickHandler(this);">

另外-确保
imageValidation
函数具有默认返回值（在函数的最后一行添加
return false；
）

编辑：
为了防止在用户选择文件时发生验证，请删除侦听更改事件，并将验证更改为：

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

我有chqnge var名称，并试图提醒var，但当我点击“上传”按钮时，什么也没有发生。我仍然有chqnge var名称和