0

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

3 回答 3

4

onsubmit总是回来false...

更改它以返回结果imageClickHandler

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

并将JS函数更改为返回值

 function imageClickHandler(form){ 
      if(imageValidation()){ 
          return startImageUpload(form); 
      } 
      return false;
  }

还 - 确保您的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;
}
于 2012-04-14T00:28:30.037 回答
2

有几件事。首先,验证的结果可能会触发以下两种结果之一:执行或提醒。但是 alert 的结果在 validate 函数内部,而不是在使用 result 返回的结果返回之后。建议将其向上移动并使用 if-then-else。代码风格的东西。

其次,imageClickHandler 使用了一个名为 imageuploadform 的 JS 对象。在任何地方都看不到这样的 JS 对象。有一个附加了 imageuploadform 类的 dom 元素。但这不是一回事。授予整个 html/js 没有显示。

第三,将参数传递给 imageClickHandler 但函数定义没有定义任何参数。意图是什么?

如果您遇到困难,请尝试在各处临时散布警报消息以跟踪程序执行情况。这可能会告诉你执行的去向,或者不是。

正如 Yaron 所说,如果 startUpload 没有在后台进行实际上传,那么您必须从 onClick 返回潜在的“真实”结果。返回 '​​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></ 
于 2012-04-14T00:21:31.567 回答
0

您是否尝试过从验证中完全删除开关并仅返回 alert() 用于测试目的?

也许您的“val”变量与 jQuery val() 混淆了?尝试使用不同的 var 名称?

  var val = $(this).val();
            $(this).val('');
于 2012-04-14T00:10:36.540 回答