当我点击“上传”按钮时没有任何反应

Question

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

Answer 1

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

Answer 2

你有没有试过完全从验证中删除交换机，只是返回一个alert（）用于测试目的？

也许你的变量'val'混淆了jQuery val（）？尝试使用不同的var名称？

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

Answer 3

有几件事。首先，验证的结果可能会引发2个结果之一：做到这一点，或警觉。但是alert的结果在validate函数内是down的，而不是返回结果返回的结果。建议将它移动并使用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></