使用jQuery的ajax上傳文件報錯:Uncaught TypeError: Illegal invocation

使用ajax上傳文件,代碼如下:

$('#video-upload-btn').on('change', function(){
	var file = this.files[0];
	var data = new FormData();
	data.append('video_file',file);
	$.ajax({
		type: "POST",
		data:data,
		url: 'uploadVideo',
		dataType:'json',
		success: function (res) {
			console.log(res);
		}
	});
});

出現以下錯誤:

Uncaught TypeError: Illegal invocation
    at f (jquery.js:2)
    at ci (jquery.js:2)
    at Function.p.param (jquery.js:2)
    at Function.ajax (jquery.js:2)
    at HTMLInputElement.<anonymous> (goodspic.html?id=216:202)
    at HTMLInputElement.dispatch (jquery.js:2)
    at HTMLInputElement.h (jquery.js:2)

原因:ajax默認的兩個參數processData和contentType限制了默認發送給服務器的數據編碼類型。
1.contentType:默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型,默認值適合大多數情況,但實際上文件上傳的時候,Content-Type大致是這樣的"multipart/form-data; boundary=----WebKitFormBoundaryyr7L6TwhhOAIoEyn"。
2.processData:默認值: true。默認情況下,通過data選項傳遞進來的數據，如果是一個對象(技術上講只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置爲 false。
解決辦法：設置processData與contentType值爲false:

$('#video-upload-btn').on('change', function(){
	var file = this.files[0];
	var data = new FormData();
	data.append('video_file',file);
	$.ajax({
		type: "POST",
		data:data,
		url: 'uploadVideo',
		dataType:'json',
		processData: false,   // 不處理髮送的數據
		contentType: false,   // 不設置Content-Type請求頭
		success: function (res) {
			console.log(res);
		}
	});
});