html5原生文件上传

fileupload = {};
fileupload_callback = null;
fileupload_check = null;



$(function(){
	var width = document.body.clientWidth;
	var height = document.body.clientHeight;
	var leftW = (width - 350)/2;
	var topH = (height - 130)/2;
	var html = "<div class='fileUploadDialogUnderlay' style='width:100%;height:100%;display:none;z-index:900;top:0;left:0;background: transparent;position: absolute;'></div>"
			+"<div class='dijitDialog' id='fileUploadDialog' style='width: 350px;left:"+leftW+"px; top:"+topH+"px;display:none; position: absolute;z-index:951;'>"
			+ "	<div class='dijitDialogTitleBar' title='提示'>"
			+ "		<span class='dijitDialogTitle' id='fileUploadDialog_title' >提示</span>"
			+ "		<span class='dijitDialogCloseIcon' title='取消' οnclick='fileupload.closeDialog();'>"
			+ "			<span class='closeText' title='取消' >x</span>"
			+ "		</span>"
			+ "	</div>"
			+ "	<div class='dijitDialogPaneContent'>"
			+ "	<div style='height:90px;text-align:center;'>"
			+ "<form id='fileUploadForm' enctype='multipart/form-data' method='post' >"
			+ "		<input type='file' id='file' name='file'style='border: none;cursor: pointer;' class='form-control' οnchange='fileupload.selectedFile();'>"
			+ "		<input type='hidden' name='fileSize' id = 'fileSize'>"
			+ "		<div id='progressNumber' style='margin: 5px;background: #7da8f1; color: #ffff;'></div>"
			+ "</form>"
			+ "	</div>"
			+ "	<div class='dialog_menu_floor'>"
			+ "		<button type='button' style='padding:4px 30px;' class='btn btn-info submit_btn' οnclick='fileupload.upload();'>上传</button>"
			+ "		<button type='button' style='padding:4px 30px;' class='btn btn-info' οnclick=\"fileupload.closeDialog();\">关闭</button>"
			+ "	</div></div></div>";	
	$('body').append(html);	
});

fileupload.closeDialog = function(){
	$("#fileUploadForm")[0].reset(); 
	$('#fileUploadDialog').hide();
	$('.fileUploadDialogUnderlay').hide();
	$('#progressNumber').text("");
};
/**
 * fileTypeExts 文件格式 
 * fileSize 文件大小 KB,MB 
 * ismultiple true/false 默认false 
 * params 若采用fileservice上传时参数中需要包含servicename参数
 * callback 回调函数
 */
fileupload.showDialog = function(p){
	var setting = {};
	var defaultSetting = {
		fileTypeExts : '*',
		fileSize : '',
		multiple : false,
		url : g_basepath + '/file/upload/file/'
	}
	$.extend(setting,defaultSetting,p);
	
	fileupload.setting(setting);
	$("#fileUploadDialog").show();
	$('.fileUploadDialogUnderlay').show();
};
//上传设置
fileupload.setting = function(p){
	var furl = p.url;
	if(p.params){
		if(furl.indexOf("?") > 0){
			furl += "&";
		}
		else{
			furl += "?"
		}
		furl += p.params;
	}
	$("#fileUploadForm").attr("action",furl);
	
	if(p.multiple){
		$("#file").attr("multiple",p.multiple);
	}
	$("#file").attr("accept",p.fileTypeExts);
	$("#fileSize").val(p.fileSize);
	if(p.callback){
		fileupload_callback = p.callback;
	}
	if(p.check){
		fileupload_check = p.check;
	}
}
//选中文件事件
fileupload.selectedFile = function(){
	var file = document.getElementById('file').files[0];
    if (file) {
      var fileSize = 0;
      if (file.size > 1024 * 1024)
        fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
      else
        fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
      var localFileSize = $("#fileSize").val();
      if(localFileSize != ''){
    	  var l = localFileSize.replace("MB",'').replace('KB','');
    	  if(parseInt(file.size)>parseInt(l)){
    		  dialog.alert("文件大小超过限制（"+localFileSize+"）,请重新上传！");
    		  $('#fileUploadForm')[0].reset(); 
    		  return;
    	  }
      }
    }
}
//文件上传
fileupload.upload = function() {
	try{
		var file = document.getElementById('file').files[0];
		if(file == undefined){
			dialog.alert('请选择上传文件');
			return;
		}
		
		if(fileupload_check != null){
			fileupload_check(file);
		}else{
			
			fileupload.uploadFile(file);
		}
	}catch(e){
		$('#progressNumber').text("");
	}
	
}

fileupload.uploadFile = function(file){
	var formdata = new FormData();
	formdata.append("file", file);
	
	var xhr = new XMLHttpRequest();
	xhr.upload.addEventListener("progress", fileupload.uploadProgress, false);
	xhr.addEventListener("load", fileupload.uploadComplete, false);
	xhr.addEventListener("error", fileupload.uploadFailed, false);
	xhr.addEventListener("abort", fileupload.uploadCanceled, false);
	xhr.open("POST", $("#fileUploadForm").attr("action"));
	
	utils.showProcessBar();
	
	xhr.send(formdata);
}

fileupload.uploadProgress = function(evt) {
    if (evt.lengthComputable) {
      var progress = Math.round(evt.loaded * 100 / evt.total);
      $('#progressNumber').text(progress.toString() + '%');
    }
    else {
    	$('#progressNumber').text('error');
    }
  }

// 当服务器响应后，事件被触发
fileupload.uploadComplete = function(evt) {
	utils.closeProcessBar();
	if(fileupload_callback != null){
		var d = evt.target.responseText;
		fileupload_callback(d);
	}else{
		let msg = evt.currentTarget.responseText;
		if(msg){
			dialog.alert(msg);
			return;
		}
	}
    fileupload.closeDialog();
  }

fileupload.uploadFailed = function(evt) {
	fileupload.closeDialog();
	utils.closeProcessBar();
	dialog.alert(evt.target.responseText);
  }

fileupload.uploadCanceled = function(evt) {
	utils.closeProcessBar();
	fileupload.closeDialog();
	dialog.alert("上传被取消或浏览器断开连接");
  }