單擊“上傳”按鈕時沒有任何反應

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

編輯：

為了防止在用戶選擇文件時發生驗證，請刪除對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;
}

Answer 2

有幾件事。 首先，驗證的結果可能會觸發以下兩種結果之一：執行或發出警報。 但是警報的結果位於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></ 

Answer 3

您是否嘗試過將開關從驗證中完全刪除，並僅出於測試目的返回alert（）？

可能是您的'val'變量與jQuery val（）混淆了嗎？ 嘗試使用其他var名稱？

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