我們可以告訴用戶是否取消瀏覽器文件上傳？

在Web瀏覽器中，當用戶單擊文件字段上載文件時，瀏覽器會顯示文件上傳對話框（至少在Windows和OSX中）。我們可以告訴用戶是否取消瀏覽器文件上傳？

讓我們假設用戶改變主意並取消文件上傳。我們能找出答案嗎？

我們可以找出用戶是否擊中了退出鍵（通常關閉文件對話框）。但是如果用戶點擊「取消」或標籤到「取消」並點擊進入，該怎麼辦？

來源

2014-01-08 Jumbalaya Wanton

這取決於所採用的方法來上傳文件。 iFrame，Ajax等等。你絕對可以捕捉到這些事件並處理它們，但同樣取決於你上傳的內容。 – Jose

什麼阻止您檢查所述文件輸入字段的值屬性？ – Sumurai8

@Jose我不這麼認爲。這很簡單。如果用戶在Native OS文件選擇對話框上單擊取消，我們可以告訴，或者我們不能。我不關心對話結束後會發生什麼。 –

首先，我想強調的是，<input type="file" />不會自動上傳文件，除非您使用ajax或用戶提交表單。用戶只是告訴瀏覽器在哪裏可以找到該文件，以防用戶想要在某個時間提交表單。

要了解我做了這個腳本發生了什麼。 標籤沒有註冊，如果我把它放在輸入字段上，所以我把它放在輸入字段的父代。其餘的工作基於它以它們所附加的順序執行處理程序。

如果用戶選擇一個文件（或取消上載）超過1/10秒，這幾乎總是如此。當某個特定動作發生時，我會用時間戳設置數據，這會獲得輸入字段焦點，而不是通過關閉上傳對話框（例如，通過選擇文件或點擊轉義/單擊取消）。如果輸入字段在1/10秒內獲得焦點，那麼我知道這不是我們正在尋找的事件。我們檢查的第二件事是，如果價值改變。如果用戶取消對話框，則該值不會更改。那是當用戶取消了對話...以某種方式...並且仍然想要上傳相同的文件。如果該值確實發生變化，用戶就會改變想要上傳的文件。該文件不會更新，直到用戶提交論壇。

HTML：

<input type="file" id="example" />

的JavaScript（用jQuery）：

$(document).ready(function() { 
    $('#example').parent().on('keydown', function(e) { 
     var key = e.key || e.keyCode || e.which; 
     if(key == "Tab" || key == 9) { 
      $('#example').data('actiontime', +new Date()); 
     } 
    }); 

    $('#example').on('blur', function() { 
     $(this).data('lastval', $(this).val()); 
    }).on('mousedown', function() { 
     $(this).data('actiontime', +new Date()); 
    }).on('focus', function() { 
     var fastevents = new Date() - $(this).data('actiontime') < 100; 
     if($(this).data('lastval') == undefined) { 
      console.log('First run'); 
     } else if($(this).data('lastval') != $(this).val() && !fastevents) { 
      console.log('Input changed'); 
     } else if(!fastevents) { 
      console.log('User canceled dialog somehow'); 
     } else { 
      console.log('Other event'); 
     } 
    }); 
});

來源

2014-01-08 20:31:38 Sumurai8