防止在文件加載時單擊窗體按鈕

我正在使用以下代碼段，該代碼段允許用戶使用單個上載按鈕上載最多3個文件。在文件上傳過程中，動畫將代替上傳按鈕。防止在文件加載時單擊窗體按鈕

我的要求是我需要防止用戶在文件上傳時單擊任何輸入字段按鈕。我不想爲此使用hide（）函數。在jQuery中有一種方法可以在文件上傳/加載動畫運行時停止輸入字段按鈕的點擊。最近開始使用jQuery，所以仍然是初學者，因此很樂意爲此使用簡單的解決方案。謝謝！

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(document).on("click", ".UploadBtn", function(event) { 
      $(".p").each(function(file) { 
       if ($(this).val()) { 
        $(".loader").show(); 
        $(".spinner").show(); 
        $(".UploadBtn").hide(); 
       } 
      }) 
     }); 
    }); 
</script>

我的HTML代碼如下。「p」級用於{{ form.photo1 }}，{{ form.photo2 }} & {{ form.photo3 }};

<div class="mtl mbl"> 
{{ form.photo1 }} 
</div> 
<div class="loader"> 
<div class="spinner"></div> 
loading</div> 
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload"> 

<div class="mtl mbl"> 
{{ form.photo2 }} 
</div> 
<div class="loader"> 
<div class="spinner"></div> 
loading</div> 
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload"> 

<div class="mtl mbl"> 
{{ form.photo3 }} 
</div> 
<div class="loader"> 
<div class="spinner"></div> 
loading</div> 
<input type="submit" class="UploadBtn btn bm bco mbs mts" style="border-color:#f57c00;" value="Upload">

當上傳按鈕，紅色按鈕所指向，是點擊動畫開始，而該文件是得到上傳在它的位置運行。在此期間，我想阻止任何人在選擇文件（）上點擊，藍色箭頭指向它。

來源

2017-07-26 shahz

add attr disabled – error404

它不會阻止文件上傳嗎？ – shahz

上傳過程開始後或者點擊上傳按鈕後動態添加attr – error404

嘗試使用道具禁用上傳按鈕

$(document).ready(function() { 
$(document).on("click", ".UploadBtn", function(event) { 
    $(".p").each(function(file) { 
    if ($(this).val()) { 
     $(".loader").show(); 
     $(".spinner").show(); 
     $(".UploadBtn").prop("disabled", "true"); 
    } 
    }) 
}); 
});

來源

2017-07-26 18:39:53

我試圖防止點擊選擇文件按鈕而不是上傳按鈕，因爲加載動畫在其位置運行並且上載按鈕消失。我只想阻止{{form.photo1}}，{{form.photo2}}＆{{form.photo3}}中的選擇文件按鈕。同樣，一旦文件被上傳，頁面刷新。 – shahz

嘿，我似乎無法找到您發佈的代碼中選擇按鈕的代碼？ –

刷新頁面：您可以進行回調，根據文件上傳的結果，您可以切換「disabled」的值並刷新頁面。 –

在jQuery的1.6+可以動態添加atrribute attr='disabled'或attr='readonly'您輸入字段，直到您確認您的文件被加載：

// put this within the code that checks if the files are still loading 
$(".UploadBtn").prop('disabled', true); 

// within the code that checks if the files have successfully loaded, make sure to use the following 
$(".UploadBtn").prop('disabled', false);

也快速看看prop在這個詳細的答案中做了什麼。

來源

2017-07-26 18:40:05 AGE

我試圖阻止選擇文件按鈕被點擊而不是上載按鈕，因爲加載動畫在其位置運行並且上載按鈕消失。我只想阻止{{form.photo1}}，{{form.photo2}}＆{{form.photo3}}中的選擇文件按鈕。同樣，一旦文件被上傳，頁面刷新。 – shahz

防止在文件加載時單擊窗體按鈕

回答

相關問題