// ======================= 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 = '' + '
' + '
' + '
' + '
' + '
' + '
' + '
' + '
' + '
0.0%
' + '
'; 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); }