CocoRoboDesktop/js/Common/Upload.js

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