Namespace.register("U.MD.UI"); //Disk上传的命名空间 //#region 上传区域 Html5 Flash html //整个控件的名字规范函数名字 /** * 上传带界面的函数 * @param {string} url为服务器地址 * @param {function} 回调函数 * @param {function} 判断hash值回调函数 * 回调函数返回结果:url为服务器地址返回的值。 */ U.MD.UI.upload = function (url, cb, hashcallback) { //如果有flash,则走flash。 var _str = U.UF.CI.isSupportFlash(); //得到客户端支持html还是flash的处理 //_str = "Flash"; //html5的处理和html的处理,如果html,不能断点续传,不能解析md5. if (_str == "HTML5") { U.MD.UI.upload.html5(url, cb, hashcallback); } //flash的处理 else if (_str == "Flash") { U.MD.UI.upload.flash(url, cb, hashcallback); } //只能通过input上传的处理 else { U.MD.UI.upload.input(url, cb, hashcallback); } } //所有的上传框选择的文件处理 U.MD.UI.upload.uploadFileInfo = []; /** * 文件上传函数 *@param * @param {string} url为服务器地址 * @param {function} 回调函数 * @param {function} 判断hash值回调函数 * 回调函数返回结果:url为服务器地址返回的值。 */ U.MD.UI.upload.upfiles = function (r,url, cb, hashcallback) { U.MD.UI.inputSelect({ //错误处理 error: function (r) { console.log("上传错误:" + r); }, //获取hash回调 getHashCallBack: function (filehash, fileinfo, callback) { //判断获取hash hashcallback(filehash, fileinfo, function (isupload) { //判断是否上传的处理 if (isupload) { //如果md5匹配后还是要求上传,那么这里就处理上传 //判断数据库是否有该文件hash值 回调参数(文件服务器名,服务器文件大小) U.UF.UP.html5Upload.select(fileinfo, filehash, function (fileservername, filesize) { //上传处理 U.UF.UP.html5Upload.loop(fileinfo, filehash, fileservername, filesize, function (value) { //上传成功的处理 if (value == true) { callback.getData(filehash, fileservername, fileinfo); //得到返回值处理 var _nextuploadfile = U.MD.UI.delUploadFile(fileinfo.fileel, fileinfo); //删除上传成功后的文件,得到下一个需要上传的文件 // 如果有下一个文件要上传的处理 if (_nextuploadfile) { U.MD.UI.inputUpload(_nextuploadfile, callback); } } //上传中的处理 else { callback.progress(value, fileinfo.fileid, "上传中"); //生成进度条 } }); }); } else { var _nextuploadfile = U.MD.UI.delUploadFile(fileinfo.fileel, fileinfo); //删除上传成功后的文件,得到下一个需要上传的文件 // 如果有下一个文件要上传的处理 if (_nextuploadfile) { U.MD.UI.inputUpload(_nextuploadfile, callback); } } }); }, //获取进度条 progress: U.MD.UI.progress, //上传文件的进度条处理 //得到服务器返回值的处理 getData: function (filehash, fileservername, file) { var _type = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length), //获取文件后缀名 _thumbnailname = 'gif|jpg|jpeg|png'.indexOf(_type.toLowerCase()) > -1 ? (Guid.newGuid() + "." + _type) : null; //判断是否为图片 //如果是图片则创建缩略图 if (_thumbnailname) { U.A.Request(US.DISK, ['CreateThumbnail', fileservername, _thumbnailname], function (r) { }); } //添加文件到数据库 U.A.Request(US.CD, [US.DB, 'UseStudio_Disk', 'CreateUploadFile', U.UF.C.queryString("UserId", url), file.fileid, U.UF.C.queryString("DirectoryId", url), file.name, fileservername, _thumbnailname, filehash, file.size, 1, file.name, _type, U.UF.C.queryString("Encrypt", url)], function (request) { cb({ data: [fileservername, fileservername, file.fileid, file.size, U.UF.C.queryString("Encrypt", url), U.UF.C.queryString("DirectoryId", url)] }, file); }); } }); this.value = ""; } /** * HTML5上传 * @param {string} url为服务器地址 * @param {function} 回调函数 * @param {function} 判断hash值回调函数 * 回调函数返回结果:url为服务器地址返回的值。 */ U.MD.UI.upload.html5 = function (url, cb, hashcallback) { //如果是html5,走html5 U.MD.UI.create(); //创建传出上传框 var _clickuploadel = U.selectEl("#U_MD_UI_UP_DRT")[0]; //获取上传按钮的处理 _clickuploadel.innerText = ""; //创建一个input file $$("input", { "multiple": "true", "type": "file", "accept": "*/*", "onchange": function (r) { U.MD.UI.upload.upfiles(r, url, cb, hashcallback); return false; //防止重复执行 }, "style": { "cssText": "display: block; position: relative; width: 100%; height: 100%; cursor: pointer; border: 0; color: #666; background: #eee; -moz-user-select: -moz-none; -webkit-user-select: none; opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0;" } }, _clickuploadel); if ($("#U_MD_UI_UP_C")[0].length != 0) //通过判断页面上是否要待传的文件判断是否为input提交,如果不是则 U.MD.UI.upload.upfiles(event, url, cb, hashcallback); } /** * Flash上传 * @param {string} url为服务器地址 * @param {function} 回调函数 * @param {function} 判断hash值回调函数 * 回调函数返回结果:url为服务器地址返回的值。 */ U.MD.UI.upload.flash = function (url, cb, hashcallback) { U.MD.UI.create(); //创建传出上传框 var _url = url, _cb = cb, _hashcallback = hashcallback, _clickuploadel = U.selectEl("#U_MD_UI_UP_DRT")[0]; //获取上传按钮的处理 _clickuploadel.innerText = ""; //添加flash按钮 U.UF.UP.addFlashUploadBottom(_clickuploadel, "flashupload", { "width": _clickuploadel.clientWidth, "height": _clickuploadel.offsetHeight }, { error: U.MD.UI.flashError, //错误处理回调函数 /** * 选择文件回调函数 * @param {array} filesinfo */ select: function (filesinfo) { U.MD.UI.flashSelect(filesinfo, _url, U.UF.C.isFunction(_hashcallback)); //选择文件的处理 }, /** * 上传文件获取文件流后的处理 * @param {string} 文件的md5值 * @param {string} 需要上传的文件的唯一识别id */ getHashCallBack: function (md5, fileid) { var _fileinfo = U.MD.UI.getFileInfoById(fileid)[0]; //判断获取hash _hashcallback(md5, _fileinfo, function (isupload) { //判断是否上传的处理 if (isupload) { //如果md5匹配后还是要求上传,那么这里就处理上传 //直接执行文件的上传处理 U.UF.UP.flashUpload($("*flashupload")[0], fileid, _url); } else { //否则执行下一个上传的处理 U.MD.UI.flashContinueUpload(fileid, _url, U.UF.C.isFunction(_hashcallback)); } }); }, progress: U.MD.UI.progress, //上传文件的进度条处理 uploadComplete: U.MD.UI.flashUploadComplete, //单个文件上传成功的回调函数 //单个文件上传成功后,得到服务器的响应值处理,和CP不一样的是这里是得到了返回值,上面的只是文件已经传输到服务器了。 /** * 上传文件成功返回上传文件值 * @param {object} 获取服务器返回值 * @param {string} 上传文件的唯一识别id */ getData: function (r, fileid) { if (U.UF.C.isFunction(_cb)) { _cb(r, U.MD.UI.getFileInfoById(fileid)[0]); } //否则执行下一个上传的处理 U.MD.UI.flashContinueUpload(fileid, _url, U.UF.C.isFunction(_hashcallback)); }, endUpload: U.MD.UI.deleteUploadAllFile //结束上传后释放资源 }, "*"); } /** * input上传 * @param {string} url为服务器地址 * @param {function} 回调函数 * @param {function} 判断hash值回调函数 * 回调函数返回结果:url为服务器地址返回的值。 */ U.MD.UI.upload.input = function (url, cb, hashcallback) { U.MD.UI.create(); //创建传出上传框 var _clickuploadel = U.selectEl("#U_MD_UI_UP_DRT")[0]; //获取上传按钮的处理 _clickuploadel.innerText = ""; //创建一个input file $$("input", { "multiple": "true", "type": "file", "accept": "*/*", "onchange": U.MD.UI.inputSelect, "style": { "cssText": "display: block; position: relative; width: 100%; height: 100%; cursor: pointer; border: 0; color: #666; background: #eee; -moz-user-select: -moz-none; -webkit-user-select: none; opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0;" } }, _clickuploadel); } /** * 初始化创建上传弹框 */ U.MD.UI.create = function () { var _flashtop = U.selectEl("#U_MD_UI_UP_O")[0]; if (_flashtop) { U.UF.F.windowTopCenter(_flashtop); //居中弹出 } else { var _uploadel, _topel, _titleel, _bottom, _switchel; _uploadel = $$("div", { "id": "U_MD_UI_UP", "className": "U_MD_UI_UP" }); _topel = $$("div", { "className": "U_MD_UI_UP_O" }, _uploadel); //头部 _titleel = $$("div", { "className": "U_MD_UI_UP_T" }, _topel); $$("div", { "className": "U_MD_UI_UP_TO", "innerHTML": "普通上传" }, _titleel); $$("div", { "className": "U_MD_UI_UP_Z", "innerHTML": "提示声明: 严谨上传包括反动、暴力、色情、违法及侵权内容的文件;严格遵守保密法律法规,任何危害用户或犯法的行为,都必须受到法律追究。" }, _topel); //文件上传区域 $$("div", { "id": "U_MD_UI_UP_C", "className": "U_MD_UI_UP_C" }, _topel); //底部 _bottom = $$("div", { "className": "U_MD_UI_UP_D" }, _topel); _switchel = $$("div", { "className": "U_MD_UI_UP_DR" }, _bottom); $$("div", { "className": "U_MD_UI_UP_DRO", "innerHTML": "点击上传" }, _switchel); $$("div", { "className": "U_MD_UI_UP_DRO U_MD_UI_UP_DRT", "id": "U_MD_UI_UP_DRT" }, _switchel); //弹出上传框 return new U.UF.UI.form("
上传
", _uploadel, { "id": "U_MD_UI_UP_O", "style": { "width": "700px", "height": "560px" }, "ondrop" :"U.MD.DK.C.Dropload()", "ondragover":"event.preventDefault()", }, { isnarrow: false, isenlarge: false }).form; } } /** * 获取上传文件所在的位置 * @param {string} 上传文件的id * @return {array} 上传文件的位置及信息 * 0 找到上传文件的信息 * 1 上传文件在一个flashfiles的位置 * 2 上传文件在多个flashfiles中其中一个flashfiles的位置 */ U.MD.UI.getFileInfoById = function (fileid) { var i, j, _allfiles = U.MD.UI.upload.uploadFileInfo; //用户需要上传的所有文件 for (i = 0; i < _allfiles.length; i++) { j = _allfiles[i].objIndexOf({ "fileid": fileid }); //根据fileid在_allfiles[i]数组的查找获取fileid = fileid的上传文件信息 //找到该上传文件 if (j > -1) { /* * 0 找到上传文件的信息 * 1 上传文件在一个flashfiles的位置 * 2 上传文件在多个flashfiles中其中一个flashfiles的位置 */ return [_allfiles[i][j], j, i]; } } return [null, -1, -1]; //返回未找到的信息 } //#endregion //#region html5- input上传 U.MD.UI.inputSelect = function () { } //#endregion //#region html5 input上传处理 /** * 生成上传的点击框 * @param event 当input内容改变时触发函数 */ U.MD.UI.inputSelect = function (callback) { //获取input控件 var event = window.event || arguments.callee.caller.arguments[0]; var _fileinfo, _fileinfos = [], _files = event.target.files; //所有上传的文件 if (event.target.files==undefined) //为空则不是通过input上传的文件 _files = event.dataTransfer==undefined?undefined:event.dataTransfer.files; //读取拖拽上传的文件 if(_files==undefined) return false; //遍历input的文件 for (var i = 0; i < _files.length; i++) { _fileinfos.push(_files[i]); //加入待上传文件信息 } U.MD.UI.upload.uploadFileInfo.push(_fileinfos); //添加上传的处理 U.MD.UI.printUploadFiles(_fileinfos); //生成前台UI U.MD.UI.inputUpload(_fileinfos[0], callback); //调用上传 } /* 生成文件信息 * @param {file} file文件 */ //U.MD.UI.inputFileInfo = function (input) { // var _return = { // "creationDate": input.lastModifiedDate, // "creator": null, // "data": null, // "modificationData": input.lastModifiedDate, // "name": input.name, // "size": input.size, // "type": U.UF.UP.getFileNameAndExtension(input.name)[1] // } // return _return; //} /** * input上传处理的全过程 * @param event 当input内容改变时触发函数 */ U.MD.UI.inputUpload = function (file, callback) { file.isupload = true; //设置上传状态为true //进行文件加密 回调参数(进度,完成,文件hash) U.UF.UP.html5Upload.fileMd5(file, function (progress, finish, filehash) { //发生错误的处理 if (!progress) { //错误处理 if (U.UF.C.isFunction(callback.error)) { callback.error(finish); } } //判断是否解析完成 else if (finish) { callback.progress({ "Loaded": 1, "Total": 1 }, file.fileid, ""); //生成进度条 //获取hash后的回调处理 if (U.UF.C.isFunction(callback.getHashCallBack)) { callback.getHashCallBack(filehash, file, callback); } } //未解析完毕进度条处理 else { if (U.UF.C.isFunction(callback.progress)) { callback.progress(progress, file.fileid, "解析中"); //生成进度条 } } }); } //#endregion //#region flash上传处理的过程 /** * 上传框用户选择完文件的处理 * @param {array} 需要加载上传框的元素 */ U.MD.UI.flashSelect = function (uploadfiles, url, isgethash) { U.MD.UI.printUploadFiles(uploadfiles, true); //打印上传的内容 U.MD.UI.upload.uploadFileInfo.push(uploadfiles); //添加上传的信息处理 U.MD.UI.flashUpload(uploadfiles[0], url, isgethash); //上传处理 } /** * 上传的处理,如果有处理hash的那么就调用hash的回调 * @param {array} 需要加载上传框的元素 */ U.MD.UI.flashUpload = function (uploadfile, url, isgethash) { var _flashbottom = U.selectEl("*flashupload")[0], //上传按钮 _fileid = uploadfile.fileid //上传文件的唯一识别id ; uploadfile.isupload = true; //设置上传状态为true //如果需要处理获取hash值的处理 if (isgethash) { //上传前,先得到hash的值,进行判断是否文件已经存在 U.UF.UP.generateFileHash($("*flashupload")[0], _fileid); //获取hash } //文件直接上传的处理 else { //直接执行文件的上传处理 U.UF.UP.flashUpload(_flashbottom, _fileid, url); } } /** * 文件单个上传完毕 * @param {string} 上传文件的唯一识别id */ U.MD.UI.flashUploadComplete = function (fileid) { // U.alert("传输完成,等待返回。"); } /** * 所有文件上传完的处理 */ U.UF.UP.deleteUploadAllFile = function () { } /** * 清空上传框处理 */ U.MD.UI.flashEmptyUpload = function (el) { var _flashbottom = U.selectEl("*flashupload")[0]; if (_flashbottom) { U.UF.UP.deleteUploadAllFile(_flashbottom); //清理flash上传的资源 } } /** * 获取上传文件所在的位置 * @param {object} 错误消息 * @return {array} 上传文件的位置及信息 * 0 上传文件在一个flashfiles的位置 * 1 上传文件在多个flashfiles中其中一个flashfiles的位置 * 2 找到上传文件的信息 */ U.MD.UI.flashError = function (errorinfo) { if (errorinfo.message) { //有错误消息 var _meeage = "上传处理失败:" + errorinfo.message; //上传错误信息 if (UE.errorID == 1502) { //当错误编码是1502时候我们弹出用户可理解的错误 _meeage = "文件太大,电脑内存不足"; } U.alert(_meeage); //弹出错误 U.UF.C.console(errorinfo); //控制台输出错误 } } //#endregion //#region 统一处理 /** * 打印上传的信息 * @param {array} 上传的文件数组 */ U.MD.UI.printUploadFiles = function (uploadfiles, isflash) { var _type, _info, _uploaddiv, _panel, _panel_one, _progressel, _uploadcontent = U.selectEl("#U_MD_UI_UP_C"), _frag = $$("frag"); //循环打印上传的文件信息 for (i = 0; i < uploadfiles.length; i++) { uploadfiles[i].fileid = Guid.newGuid(); //设置上传文件的id _type = U.UF.UP.getFileNameAndExtension(uploadfiles[i]["name"])[1]; //获取上传文件的后缀 //创建上传文件的信息 _uploaddiv = $$("div", { "className": "U_MD_UI_UP_CO" }, _frag); _panel = $$("div", { "className": "U_MD_UI_UP_COO" }, _uploaddiv); _panel_one = $$("div", { "className": "U_MD_UI_UP_COI U_Img ", "style": { "cssText": "background-position:-12px 1px"} }, _panel); $$("div", { "className": "U_MD_UI_UP_COION", "innerHTML": _type }, _panel_one); _panel_one = $$("div", { "className": "U_MD_UI_UP_COT" }, _panel); $$("div", { "className": "U_MD_UI_UP_COTS U_MD_D_Text_Abbreviation", "innerHTML": uploadfiles[i].name }, _panel_one); $$("div", { "className": "U_MD_UI_UP_COTX", "innerHTML": "容量大小:" + U.UF.UP.minUnitToMaxUnit(uploadfiles[i]["size"]) }, _panel); _panel_one = $$("div", { "className": "U_MD_UI_UP_COS U_MD_D_Text_Abbreviation" }, _panel); $$("div", { "className": "U_MD_UI_UP_COSN", "innerHTML": "准备上传" }, _panel_one); $$("div", { "className": "U_MD_UI_UP_COSI U_Img" }, _panel_one); _panel_one = $$("div", { "className": "U_MD_UI_UP_COC U_MD_UI_UP_COX", "title": "等待响应..." }, _panel_one); $$("img", { "onerror": U.MD.C.imgError, "src": US.DOMAIN + "img/ULG.gif" }, _panel_one); $$("div", { "className": "U_MD_UI_UP_COX", "titlle": "点击撤销删除上传", "innerHTML": "撤销", "onclick": function () { U.MD.UI.delUploadFile(_uploaddiv, uploadfiles[0], isflash); // 移除当前上传元素,排队向下上传处理 } }, _panel); _progressel = $$("div", { "className": "U_MD_UI_UP_COU" }, _uploaddiv); uploadfiles[i].fileel = _uploaddiv; //记录上传元素的框 uploadfiles[i].progressel = _progressel; //进度条元素 } //添加上传的文件信息在中间上传区域 _uploadcontent.append(_frag); } /** * 移除当前上传元素,排队向下上传处理 * @param {element} 需要移除的元素 * @param {object} 上传文件的信息 */ U.MD.UI.delUploadFile = function (uploadel, uploadfile, isflash) { var i, j, _allfiles = U.MD.UI.upload.uploadFileInfo, _fileinfo = U.MD.UI.getFileInfoById(uploadfile.fileid), //根据文件的id获取在U.MD.UI.FTF["FL"]中的位置及在U.MD.UI.FTF["FL"][i]中的位置 _allfilesnum = _fileinfo[2], //文件在U.MD.UI.FTF["FL"]中的位置 _filesnum = _fileinfo[1]; //文件在U.MD.UI.FTF["FL"][i]中的位置 U.selectEl(uploadel).remove(); //上传成功后删除上传的元素 if (_filesnum != -1) { //实体存在 //移除一个上传文件 _allfiles[_allfilesnum].splice(_filesnum, 1)[0]; //如果在移除的文件是该多个flash上传中的其中一个的最后一个上传,那么直接删除上传数组 if (!_allfiles[_allfilesnum].length) { _allfiles.splice(_allfilesnum, 1); } //flash清楚上传处理 if (isflash) { U.UF.UP.deleteUploadFile($("*flashupload")[0], _filesnum, _allfilesnum); //flash中删除上传。 } //html5清除上传处理 else { U.UF.UP.html5Upload.deleteUploadFile(uploadfile); } //判断上传文件的上传状态,如果是正在上传的文件删除,那么需要向下执行上传文件 if (uploadfile.isupload) { //如果还有文件需要上传 if (_allfiles.length) { //利用排队的方式执行文件上传 for (i = 0; i < _allfiles.length; i++) { //从所有的上传文件数组里排队 for (j = 0; j < _allfiles[i].length; j++) { //在fileslist中排队筛选 if (!_allfiles[i][j].isupload) { //如果该文件的状态没有在上传中,那么就直接上传 return _allfiles[i][j]; } } } } else { //flash清理上传处理 if (isflash) { U.MD.UI.flashEmptyUpload(); //清空上传框 } else { U.UF.UP.html5Upload.deleteUploadAllFile(); } } } } } /** * 上传文件进度条处理 * @param {object} 进度条的值 Loaded 现在的进度 Total 中进度 * @param {object} 上传文件的唯一识别id * @param {object} 用md5去判断上传的文件是否需要上传 */ U.MD.UI.progress = function (progress, fileid, msg) { var _fileinfo = U.MD.UI.getFileInfoById(fileid)[0], //根据上传文件唯一识别的id获取上传文件的信息 _progresschilds = U.selectEl($(_fileinfo.fileel).childs(0).childs(0)[3]).Child(), //获取上传文件进度条元素 _progress = Math.floor((progress.Loaded / progress.Total) * 100); //获取进度的百分比 _fileinfo.progressel.style.width = _progress + "%"; //上传的进度样式 _progresschilds[0].innerText = msg; //上传信息提醒,包括准备上传、正在解析、上传中 _progresschilds[1].style.display = "none"; //上传成功后的 _progresschilds[2].style.display = "block"; //loading } /** * 接续上传的处理 * @param {string} 上传文件的唯一识别id */ U.MD.UI.flashContinueUpload = function (fileid, url, isgethash) { var _fileinfo = U.MD.UI.getFileInfoById(fileid)[0], //获取上传完的文件 _nextuploadfile = U.MD.UI.delUploadFile(_fileinfo.fileel, _fileinfo, true); //删除上传成功后的文件,得到下一个需要上传的文件 // 如果有下一个文件要上传的处理 if (_nextuploadfile) { U.MD.UI.flashUpload(_nextuploadfile, url, isgethash); //调用上传,如果有hash的获取这里支持自动获取hash } } //#endregion