jQuery 模擬網頁檔案上傳

如何使用 JavaScript 模擬 <input type="file"> 選取檔案上傳操作，一直是我寫網頁自動測試的最大障礙。

基於安全考量，瀏覽器禁止 JavaScript 代替使用者為 <input type="file"> 的選取檔案路徑。試想一下，你連上某個網頁，裡面的程式可以任意指定本機檔案自動上傳，這是多可怕的漏洞。因此，<input type="file"> 要上傳什麼檔案，只能由使用者親自操作選擇，由不得程式亂來，而這點限制屢屢成為涉及檔案上傳的網頁介面難以完全自動化測試的原因。

之前試過一些曲折解法，例如另外寫程式透過 Windows API 找開啟檔案對話框，模擬鍵盤滑鼠操作選取檔案... 等等，工程浩大，而且無法轉為背景執行，不算是完美的解決方案。另一種做法是不過透網頁介面的上傳功能，另外寫一組測試專用的 AJAX 函數取代選取檔案上傳動作，但另寫替代函式是項工程，且繞道而行有失逼真。問題有點棘手，有時我就偷懶略過上傳檔案不做測試，蒙混過關。

最近在用 Puppeteer Sharp 寫網站自動測試，上傳附檔是整個功能重要一環，省略不測，後面就都不用玩惹。逃避多年，直球對決的時刻終於來了!

苦思多時，看到一線曙光。我的網頁是用 dm-file-uploader 這個 jQuery 套件處理檔案上傳，支援拖拉檔案上傳功能。鑽進原始碼(Open Source 萬歲!)，我發現拖拉上傳功能是在網頁元素 drop 事件由 dataTransfer.files 取得檔案內容。(延伸閱讀： HTML5練習-從桌面拖拉檔案到網頁) 換言之，我只要能模擬出 dataTransfer.files 物件並觸發 drop 事件，就能用純 JavaScript 模擬檔案上傳了。當然，瀏覽器的安全管控還是在，上傳檔案的內容要自己生，不可能指定路徑叫瀏覽器抓。

最後我研究出來的程式碼如下，靠 jQuery Event 物件 跟 HTML5 File 物件 聯手模擬拖入 hello.txt 檔的效果：

var simuDropEvent = $.Event('drop', {
    preventDefault: function() {},
	originalEvent: {
		dataTransfer: {
			files: [
				new File(["Hello, world!"], "hello.txt")
			]
		}
	}
});
$("#drag-and-drop-zone").trigger(simuDropEvent);

用套件的示範網頁實測：

同樣原理應可適用所有支援拖拉上傳的 jQuery 套件，例如：對 Kendo UI 也可如法泡製。

意外解決高懸多年的難題，好開薰~

This article shows how to simulate file uploading via simulating file drag-and-drop event with jQuery in web page auto testing.