19 Nov 2020

File Upload Frontend & BackEnd

uploadFile = function() {	
	var up_file = $('#file')[0].files[0];
	//Javascript特有的formData格式，用来替代原来的form元素标签方式
	var formData = new FormData();
	formData.append("file", up_file);
	formData.append("parameter1", $('#parameter1').val());
	formData.append("parameter2", $('#parameter1').val());
	formData.append("parameter3", $('#parameter3').attr('favor'));
	
	//如果要发送一个json文件也可以，直接包装到formData里面去就行，使用JSON.stringify进行序列化
	/*
	var jsonObj = {};	
	jsonObj.parameter1 = $('#parameter1').val();
	jsonObj.parameter3 = {};
	jsonObj.parameter3.favor = $('#parameter3').attr('favor');
	formData.append('jsonObj', JSON.stringify( jsonObj ));
	//debug
	for(var pair of formData.entries()) { console.log(pair[0]+'| '+pair[1]);} 
	*/
	
	//Ajax call for upload
	getApiStatus = $j.ajax({
		type: 'GET',
		url: "/app/getApiStatus?random=" + Math.floor(Math.random() * (new Date()).getTime() + 1),
		dataType: "json",
		contentType: "application/json"
	});
	execlUploadAjax = $j.ajax({
		url:"/app/fileupload",
		//如果设置dataType为json，那么发送和返回的文件类型都要是json，否则报错
		dataType:'json',
		type:'POST',
		async: true,
		data: formData,
		//注意这里的参数必须使用processData: false，而且必须设置contentType为false
		processData : false, 
		contentType : false,
		//jquery内置的进度跟踪方法
		xhr:function(){ 
			myXhr = $.ajaxSettings.xhr(); 
			if(myXhr.upload){ // check if upload property exists 
				myXhr.upload.addEventListener('progress',function(e){ 
					var loaded = e.loaded;
					var tot = e.total;
					var per = Math.floor(100*loaded/tot).toFixed(2); 
					$("#selectedFileProgress").css("width" , per +"%");
				}, false); // for handling the progress of the upload
			}	  
			return myXhr;  //必须retrun，否则可能进入error
		},
		success:function(data){
			console.log("upload success!");
		},
		error: function (XMLHttpResponse, textStatus, errorThrown) {
			console.log("upload fail.");
		}
	});			
	//如果getApiStatus和execlUploadAjax完成（不管失败成功，都进入这里）
	$.when(getApiStatus, execlUploadAjax).done(
	function(getApiStatusLog){			
		//进行dom的操作
	}).fail(function() {
		//跳转到错误页面
		location.href = Constants.error_page_url;
	});
});