market-admin-ui/static/kj/upload-util.js

// ======================= upload-util.js 公共方法 ===========================
// 依赖库：jquery   
// 本代码更新于：2019-5-1 
// 新增更简单的写法 

// 相关配置 
var upload_cfg = {
	upload_image_url: sa.cfg.api_url + '/upload/image',	// 图片上传地址
	upload_video_url: sa.cfg.api_url + '/upload/video',	// 视频上传地址
	upload_audio_url: sa.cfg.api_url + '/upload/audio',	// 音频上传地址
	upload_apk_url: sa.cfg.api_url + '/upload/apk',	// apk安装包上传地址
	upload_file_url: sa.cfg.api_url + '/upload/file',	// file上传地址
}


// 将方法挂载到sa对象上
window.sa = window.sa || {};

// 上传图片   
sa.uploadImage = function(successCB) {
	sa.uploadFn(upload_cfg.upload_image_url, successCB);
}
// 上传视频   
sa.uploadVideo = function(successCB) {
	sa.uploadFn(upload_cfg.upload_video_url, successCB);
}
// 上传音频  
sa.uploadAudio = function(successCB) {
	sa.uploadFn(upload_cfg.upload_audio_url, successCB);
}
// 上传apk 
sa.uploadApk = function(successCB) {
	sa.uploadFn(upload_cfg.upload_apk_url, successCB);
}
// 上传任意文件 
sa.uploadFile = function(successCB) {
	sa.uploadFn(upload_cfg.upload_file_url, successCB);
}
// 上传的内部函数  (要上传到的地址，成功的回调)
sa.uploadFn = function(url, successCB) {
	// 创建input 
	var fileInput = document.createElement("input"); //创建input
	fileInput.type = "file"; //设置类型为file
	fileInput.id = 'uploadfile-' + randomString(12);
	fileInput.style.display = 'none';
	fileInput.onchange = function(evt) {
		startUpload(evt.target.files[0], url, successCB);
	}
	// 添加到body，并触发其点击事件 
	document.body.appendChild(fileInput);
	document.querySelector('#' + fileInput.id).click();
}

// 上传多张图片   
sa.uploadImageList = function(successCB) {
	sa.uploadListFn(upload_cfg.upload_image_url, successCB);
}
// 上传多个音频   
sa.uploadAudioList = function(successCB) {
	sa.uploadListFn(upload_cfg.upload_audio_url, successCB);
}
// 上传多个视频 
sa.uploadVideoList = function(successCB) {
	sa.uploadListFn(upload_cfg.upload_video_url, successCB);
}
// 上传多个文件 
sa.uploadFileList = function(successCB) {
	sa.uploadListFn(upload_cfg.upload_file_url, successCB);
}

// 上传多个的内部函数  (要上传到的地址，成功的回调)
sa.uploadListFn = function(url, successCB) {
	// 创建input
	var fileInput = document.createElement("input"); //创建input
	fileInput.type = "file"; // 设置类型为file
	fileInput.multiple = "multiple"; // 多选 
	fileInput.id = 'uploadfile-' + randomString(12);
	fileInput.style.display = 'none';
	fileInput.onchange = function(evt) {
		// 开始上传 
		var files = evt.target.files;
		for (var i = 0; i < files.length; i++) {
			let ii = i;
			startUpload(evt.target.files[ii], url, successCB);
		}
	}
	// 添加到body，并触发其点击事件 
	document.body.appendChild(fileInput);
	document.querySelector('#' + fileInput.id).click();
}




// ======================= 以下方法为过时的旧方法 =========================== 

// 开始上传，图片版
function startUploadImage(file, successCB) {
	startUpload(file, upload_cfg.upload_image_url, successCB);
}
var startUploadImage2 = startUploadImage;	// 兼容以前的写法 

// 开始上传，视频版
function startUploadVideo(file, successCB) {
	startUpload(file, upload_cfg.upload_video_url, successCB);
}
// 开始上传，音频版
function startUploadAudio(file, successCB) {
	startUpload(file, upload_cfg.upload_audio_url, successCB);
}
// 开始上传，apk版
function startUploadApk(file, successCB) {
	startUpload(file, upload_cfg.upload_apk_url, successCB);
}

// 开始上传
function startUpload(file, url, successCB) {
	
	// 准备参数 
	var form = new FormData();
	form.append('file', file);
	
	// 开始上传 
	$.ajax({
		url: url,
		data: form,
		processData: false, // 默认true，设置为 false，不需要进行序列化处理
		cache: false, 		// 设置为false将不会从浏览器缓存中加载请求信息
		contentType: false, // 避免服务器不能正常解析文件
		dataType: 'json',
		type: 'post',
		beforeSend: function (xhr) {
			show_jdt();
        },
		complete: function (xhr) {
			close_jdt();
        },
		xhr: xhrOnProgress(function(e) {
			var percent = e.loaded / e.total; // 计算进度百分比, 取值结果为 0~1 之间的小无限不循环小数 
			// progressCB(percent * 100);
			set_jdt_value(percent * 100);
			// console.log('进度百分比' + percent);
		}),
		success: function(res) { 
			if(res.code == 200) {
				successCB(res.data);	// 把地址给回调函数 
			} else {
				sa.alert(res.msg);
			}
		},
		error: function(e) {
			sa.alert('异常: ' + JSON.stringify(e));
		}
	});
	
}




// ======================= 工具方法 =========================== 



// 返回后缀名
function get_suffix(filename) {
	var pos = filename.lastIndexOf('.');
	if (pos != -1) {
		suffix = filename.substring(pos + 1);
	}
	return suffix;
}

// 返回带有上传回调功能的 xhr 
function xhrOnProgress(fun) {
	xhrOnProgress.onprogress = fun; //绑定监听
	//使用闭包实现监听绑
	return function() {
		//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
		var xhr = $.ajaxSettings.xhr();
		//判断监听函数是否为函数
		if (typeof xhrOnProgress.onprogress !== 'function')
			return xhr;
		//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
		if (xhrOnProgress.onprogress && xhr.upload) {
			xhr.upload.onprogress = xhrOnProgress.onprogress;
		}
		return xhr;
	}
}

// 
function randomString(len) {
　　len = len || 32;
　　var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
　　var maxPos = $chars.length;
　　var str = '';
　　for (i = 0; i < len; i++) {
　　　　str += $chars.charAt(Math.floor(Math.random() * maxPos));
　　}
　　return str;
}


// ======================= 进度条相关 ===========================
// 显示进度条 
function show_jdt() {
	close_jdt();	// 先清除原来的 
	// 创建节点并添加到body 
	var str = '' +
		'<div class="jdt-fox" style="z-index: 999999999; width: 500px; height: 20px; position: fixed; top: calc(50% - 5px); left: calc(50% - 250px); ">'+
		'	<div class="jdt-fox2" style="width: calc(100% - 100px); height: 6px; margin-top: 7px; border-radius: 3px; float: left; background-color: #FFF; box-shadow: 0 0 10px #aaa;">'+
		'		<div class="jdt-fox-value" style=" transition: all 0.1s; position: relative; width: 0.0%; height: 100%; border-radius: 3px; background-color: green; box-shadow: 0 0 10px green;">'+
		'			<div class="jdt-fox-yh" style="position: absolute; right: -10px; top: -5px;">'+
		'				<div style="transition: all 1s; background-color: green; width: 16px; height: 16px; border-radius: 50%;"></div>'+
		'			</div>'+
		'		</div>'+
		'	</div>'+
		'	<div class="jdt-value-text" style="float: left; font-size: 14px; margin-left: 14px; color: #111;"> 0.0% </div>'+
		'</div>';
	var div = document.createElement("div");
	div.innerHTML = str;
	div.className = "jdt-box";
	document.body.appendChild(div);
	// 开启圆点的呼吸动画效果
	if (window.my_interval_index) {
		clearInterval(window.my_interval_index);
	}
	window.my_interval_index = setInterval(function() {
		if (window.one_num === undefined) {
			window.one_num = 0;
		}
		window.one_num++;
		var n_px = window.one_num % 2 == 0 ? '0px' : '20px';
		var box_shadow = "0 0 " + n_px + " green";
		document.querySelector('.jdt-fox-yh div').style.boxShadow = box_shadow;
	}, 1000);
}

// 关闭进度条 
function close_jdt() {
	// 先关闭动画 
	if (window.my_interval_index) {
		clearInterval(window.my_interval_index);
	}
	// 再销毁dom 
	var box = document.querySelector('.jdt-box');
	if (box) {
		box.parentNode.removeChild(box);
	}
}

// 设置进度条进度, 参数为一个0~100之间的小数 
function set_jdt_value(value) {
	value = parseInt(value * 10) / 10.0 + '%';	// 保证小数点后一位 
	// 改变进度条宽度
	var dft = document.querySelector('.jdt-fox-value');
	if(dft){
		dft.style.width = value;	
	}
	// 改变文字百分比值  
	var dvt = document.querySelector('.jdt-value-text');
	if(dvt) {
		dvt.innerHTML = value;	
	} 
	// console.log(value);
}