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("<div class='U_MD_F_S_TI'>上传</div>", _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