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

Nothing happens when I click on the "Upload" button

本文关键字：任何反 按钮 单击 上传      更新时间：2023-09-26

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

有几件事。 首先，验证结果可能会触发以下 2 个结果之一：执行或警报。 但是警报的结果在验证函数中向下，而不是在使用返回结果返回结果后顶部。 建议将其向上移动并使用if-then-else。 代码风格的东西。

其次，imageClickHandler 使用的是一个名为 imageuploadform 的 JS 对象。 在任何地方都看不到这样的 JS 对象定义。 有一个 dom 元素，上面附加了一个 imageuploadform 类。 但这不是一回事。当然，整个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></

您是否尝试过从验证中完全删除开关并仅返回 alert（） 以进行测试？

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

  var val = $(this).val();
            $(this).val('');
相关文章：