當我點擊「上傳」按鈕時沒有任何反應

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></