webupload附件上传插件的开发与代码编写

webupload附件上传插件的开发与代码编写

引入

document.write('');
document.write('');

使用插件

  
                
                        
                          上传附件:
                            
                        
                    
  


$("#attchmentId").webupload({ disabled: false, preview: false });
		if (pagetype == "show") {
			 $("input").attr("readonly", "readonly");
	            $(".easyui-combobox").combo('readonly', true);
	            $(".easyui-combotree").combotree('readonly', true);
	            $('.easyui-textbox').textbox('readonly');
	            $(".easyui-my97").my97('disable');
	            $("#attchmentId").webupload({ disabled: true, preview: true });
		}

(function (window, $, undefined) {
var _Core = function () {};
  window.$Core = new _Core();

    var config = function () {
        return {
            //附件上传单文件大小限制
            WebUpload_fileSingleSizeLimit: 50 * 1024 * 1024,
            //ajax请求超时时间
            ajaxTimeout: 500000
        };
    };
    $Core.Config = new config();
})(window, jQuery);

(function ($) {
    var DOWN_PATH = $Core.SERVICEPATH() + "plugs/attachment/get/";
    var UP_PATH = $Core.SERVICEROOT() + 'zuul/plugs/attachment/fileUpload';
    //WebUploader.Uploader.register({
    //    "before-send-file": "beforeSendFile"
    //}, {
    //        beforeSendFile: function (file) {

    //            var task = new $.Deferred();
    //            (new WebUploader.Uploader()).md5File(file, 0, 10 * 1024 * 1024).progress(function (percentage) {

    //            }).then(function (val) {
    //                //console.log("用时：" + ((new Date()).getTime() - d1.getTime()));
    //                console.log(file.id + "md5：" + val);
    //                //task.reject();
    //                task.resolve();
    //            });
    //            return $.when(task);
    //        }
    //    });

    function create(target) {
        var state = $.data(target, 'webupload');
        var opts = state.options;

        var t = $(target);
        var $htmlUpload = t.next().find(".uploader");
        if (!t.hasClass("webupload-f")) {
            t.addClass("webupload-f");
            var name = t.attr("name");
            t.attr("textboxname", name).removeAttr("name");
            var $textbox = $('');
            $textbox.attr("name", name);

            $htmlUpload = $('
' +
                '
' +
                '
上传文件
 ' +
                //'开始上传 ' +
                //'全部重试 ' +
                // '' +
                //    ' 清空所有' +
                '
'
            );
            $htmlUpload.append($textbox);
            t.hide();
            t.after($htmlUpload);

            var $command = $htmlUpload.find(".command");
            var $picker = $htmlUpload.find(".uploader-picker");
            var $uploaderList = $htmlUpload.find(".uploader-list");
            opts.pick = $picker[0];
             
            var uploader = WebUploader.create(opts);
            uploader.on('uploadBeforeSend',
                function(object, data, header) {
                    var user = $Core.USER();
                    header = $.extend(header,
                        {
                            'token': user.TOKEN,
                            'appid': user.APP_ID
                        });
                });
            //当文件被加入队列以后触发。
            uploader.on('fileQueued',
                function(file) {
                    if (file.size > $Core.Config.WebUpload_fileSingleSizeLimit) {
                        alert(file.name +
                            "单文件不能超过" +
                            WebUploader.Base.formatSize($Core.Config.WebUpload_fileSingleSizeLimit, 0));
                        uploader.removeFile(file, true);
                        return false;
                    }
                    var $li = createFileItem(uploader, file, opts);
                    $uploaderList.append($li);
                });
            //当文件被移除队列后触发。
            uploader.on("fileDequeued",
                function(file) {
                    $("#" + file.id).fadeOut(function() {
                        $(this).remove();
                        changevalue(target);
                    });
                    //console.log(file);
                });
            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress',
                function(file, percentage) {
                    var $li = $('#' + file.id),
                        $percent = $li.find('.progress span');
                    //console.log("percentage:", percentage);
                    // 避免重复创建
                    if (!$percent.length) {
                        $percent = $('
')
                            .appendTo($li)
                            .find('span');
                    }

                    $percent.css('width', percentage * 100 + '%');
                });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on('uploadSuccess',
                function(file, response) {
                    //console.log(response);
                    var $fileitem = $('#' + file.id);
                    if (response.code != undefined && response.code === 0) {
                        //response.data.attachmentId

                        $fileitem.attr("attachmentId", response.data.attachmentId);
                        var $attachmentsize = $fileitem.find(".attachment-size");
                        $attachmentsize.append(' ' +
                            ' ' +
                            '');
                    }
                    $fileitem.addClass('upload-state-done').find(".error").remove();
                    changevalue(target);
                });

            // 文件上传失败，现实上传出错。
            uploader.on('uploadError',
                function(file, reason) {
                    //console.log(reason);
                    var $li = $('#' + file.id),
                        $error = $li.find('div.error');

                    // 避免重复创建
                    if (!$error.length) {
                        $error = $('
').appendTo($li);
                        "".format("123");
                    }

                    $error.text('上传失败' + reason);
                });

            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on('uploadComplete',
                function(file) {
                    $('#' + file.id).find('.progress').remove();
                });
            //当所有文件上传结束时触发。
            uploader.on("uploadFinished",
                function() {

                });
            state.uploader = uploader;

        }
        if (opts.disabled === true) {
            disable(target);
        } else {
            enable(target);
        }
        if (opts.preview === false) {
            $htmlUpload.find(".uploader-list").addClass("nopreview");
        }
    }
    /*
    ' ' +
        ' ' +
        '' +
    * /
    /**
     * 
     * @param {any} uploader
     * @param {any} file
     */
    function createFileItem(uploader, file, opts) {
        var $li = $((
            '
' +
            '' +
            ' 
' +
            ' ' +
            '{1} ' +
            ' ' +
            '{2} ' +
            '' +
            '' +
            '' +
            '' +
            '
' +
            '
').format(file.id, file.name, WebUploader.Base.formatSize(file.size))
        ),

            $close = $li.find(".filedel"),
            $attachmentIcon = $li.find(".mailbox-attachment-icon"),
            $attachmentIcon_icon = $attachmentIcon.find(".fa"),
            $attachmentsize = $li.find(".attachment-size")
            ;
       
        if (file.attachmentId) {
            $li.attr("attachmentId", file.attachmentId);
            $attachmentsize.append(' ' +
                ' ' +
                '');
        }
        $close.click(function () {
            var fileId = $(this).parent().parent().parent().attr("id");
            //alert(fileId);
            //uploader.cancelFile(fileId);
            uploader.removeFile(fileId, true);

        });
        //var iconclass = "icon-new_file";
        if (opts.preview === true) {
            switch (file.ext.toLowerCase()) {
                case "gif":
                case "jpg":
                case "jpeg":
                case "bmp":
                case "png":

                    $attachmentIcon.addClass("has-img").html("");
                    var $img = $("").appendTo($attachmentIcon);
                    if (file.attachmentId) {
                        $img.attr("src", DOWN_PATH + file.attachmentId);
                    } else {
                        uploader.makeThumb(file,
                            function (error, src) {
                                if (error) {
                                    $img.replaceWith('不能预览');
                                    return;
                                }
                                $img.attr('src', src);
                            },
                            500,
                            460);
                    }
                    $img.click(function () {
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            area: '50%',
                            skin: 'layui-layer-nobg', //没有背景色
                            shadeClose: true,
                            content: ''
                        });
                    });
                    break;
                case "docx":
                case "dox":
                    $attachmentIcon_icon.attr("class", "fa fa-file-word-o");
                    break;
                case "xlsx":
                case "xls":
                    $attachmentIcon_icon.attr("class", "fa fa-file-excel-o");
                    break;
                case "pptx":
                case "ppt":
                    $attachmentIcon_icon.attr("class", "fa fa-file-powerpoint-o");
                    break;
                case "zip":
                case "rar":
                    $attachmentIcon_icon.attr("class", "fa fa-file-zip-o");
                    break;
                case "mp4":
                case "avi":
                case "mkv":
                case "mov":
                case "m4v":
                case "3gp":
                case "wmv":
                case "rm":
                case "rmvb":
                    $attachmentIcon_icon.attr("class", "fa fa-file-video-o");
                    break;
                case "mp3":
                case "wma":
                case "wav":
                case "ape":
                case "aac":
                case "flac":
                    $attachmentIcon_icon.attr("class", "fa fa-file-audio-o");
                    break;
                case "txt":
                case "text":
                    $attachmentIcon_icon.attr("class", "fa fa-file-text-o");
                    break;
                default:
                    $attachmentIcon_icon.attr("class", "fa fa-file-o");
                    break;
            }
        }
        else
            $attachmentIcon.hide();
        return $li;
    }

    function changevalue(target) {
        var t = $(target);
        var htmluploader = t.next();
        var uploderList = htmluploader.find(".uploader-list");
        var $textbox = htmluploader.find(".textbox-value");

        var fileItems = uploderList.find("[attachmentId]");

        var fileid = [];
        $.each(fileItems, function (i, item) {
            var n = $(item);
            fileid.push(n.attr("attachmentId"));
        });
        $textbox.val(fileid.join(","));
    }
    function getstate(target) {
        return $.data(target, 'webupload');
    }

    function setValue(target, value) {
        var t = $(target);
        var state = getstate(target);
        var uploader = state.uploader;
        var opts = state.options;
        var $htmlUpload = t.next().find(".uploader-list");
        $htmlUpload.empty();
        if (value) {
            $.get("/plugs/attachment/getByIds/" + value,
                function (result) {
                    if (result.data) {
                        $.each(result.data,function (i, n) {
                                if (n != null)
                                    $htmlUpload.append(createFileItem(uploader,
                                        {
                                            id: n.attachmentId,
                                            name: n.fileName,
                                            size: n.fileSize,
                                            attachmentId: n.attachmentId,
                                            ext: n.attachmentType.replace(".", "")
                                        },
                                        opts));
                            });
                        //t.combo("setText", fileNames.join(","));
                    }
                    changevalue();
                });
        }
        changevalue();
        t.next().find(".textbox-value").val(value);
    }
    function getValue(target) {
        var t = $(target);
        //otps = $.data(target, 'webupload'),
        //  uploader = otps.uploader;
        var htmluploader = t.next();
        var $textbox = htmluploader.find(".textbox-value");
        return $textbox.val();
    }
    function isInProgress(target) {
        var t = $(target);
        var state = getstate(target),
            uploader = state.uploader;
        return uploader.isInProgress();
    }

    function disable(target) {
        var t = $(target);
        var state = getstate(target);
        var opts = state.options;
        opts.disabled = true;
        var htmluploader = t.next().find(".uploader");
        htmluploader.addClass("disabled");
        //htmluploader.find(".filedel").hide();
    }

    function enable(target) {
        var t = $(target);
        var state = getstate(target);
        var opts = state.options;
        opts.disabled = false;
        var htmluploader = t.next().find(".uploader");
        htmluploader.removeClass("disabled");
        //htmluploader.find(".filedel").show();
    }

    function getUploader(target) {
        var state = getstate(target);
        return state.uploader;
    }

    $.fn.webupload = function (options, param) {
        if (typeof options == "string") {
            var method = $.fn.webupload.methods[options];
            if (method) {
                return method(this, param);
            }
        }
        options = options || {};
        return this.each(function () {
            var state = $.data(this, "webupload");
            if (state) {
                $.extend(state.options, options);
            } else {
                $.data(this, "webupload",
                    {
                        options: $.extend({}, $.fn.webupload.defaults, $.fn.webupload.parseOptions(this), options)
                    });
            }
            create(this);
        });
    };

    $.fn.webupload.methods = {
        options: function (jq) {
            var opts = $.data(jq[0], 'webupload').options;
            return opts;
        },
        setValue: function (jq, value) {
            return jq.each(function () { setValue(this, value); });

        },
        getValue: function (jq) {
            return getValue(jq[0]);
        },
        isInProgress: function (jq) {
            return isInProgress(jq[0]);
        },
        disable: function (jq) {
            return jq.each(function () { disable(this); });
        },
        enable: function (jq) {
            return jq.each(function () { enable(this); });
        },
        uploader: function(jq) {
            return getUploader(jq[0]);
        }
    };
    $.fn.webupload.parseOptions = function (target) {
        return $.extend({}, $.parser.parseOptions(target, [
            "dnd", "disableGlobalDnd", "paste", "pick", "accept", "thumb", "compress", "runtimeOrder",
            "formData", "fileVal", "method", "sendAsBinary",
            {
                auto: "boolean", prepareNextFile: "boolean", chunked: "boolean", duplicate: "boolean",
                preview: "boolean"
            },
            {
                chunkSize: "number", chunkRetry: "number", threads: "number",
                fileNumLimit: "number", fileSizeLimit: "number", fileSingleSizeLimit: "number"
            }
        ]));
    };

    $.fn.webupload.defaults = {

        // swf文件路径
        swf: '/Content/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: UP_PATH,
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        //pick: '#picker',
        // 自动上传。
        auto: true,
        //compress: {
        //    // 图片质量，只有type为`image/jpeg`的时候才有效。
        //    quality: 95,
        //    // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
        //    allowMagnify: false,
        //    // 是否允许裁剪。
        //    crop: false,
        //    // 是否保留头部meta信息。
        //    preserveHeaders: true,
        //    // 如果发现压缩后文件大小比原来还大，则使用原来图片
        //    // 此属性可能会影响图片自动纠正功能
        //    noCompressIfLarger: false,
        //    // 单位字节，如果图片大小小于此值，不会采用压缩。
        //    compressSize: 0
        //},
        //chunked: true,
        fileVal: "fileName",
        preview: true, //是否显示图标预览
        prepareNextFile: true,
        accept: [{
            title: 'file',
            extensions: 'doc,docx,pdf,xls,xlsx,ppt,pptx,gif,jpg,jpeg,bmp,png,rar,zip,txt,text',
            mimeTypes: '.doc,.docx,.pdf,.xls,.xlsx,.ppt,.pptx,.gif,.jpg,.jpeg,.bmp,.png,.rar,.zip,.txt,.text'
        }]
        //单文件限制大小
        //fileSingleSizeLimit: 1024 * 1024 * 5,
    };

    $.parser.plugins.push("webupload");

    if ($.fn.form) {
        $.fn.form.defaults.fieldTypes.unshift("webupload");
        //$.array.insert($.fn.form.comboList, 0, "my97");
    }
})(jQuery);

@Controller
@RequestMapping("/attachment")
public class AttachmentController  extends BaseController {
	@Autowired
	private AttachmentVOService attachmentVOService;
	/**
     * 实现文件上传
     * */
    @RequestMapping("fileUpload")
    @ResponseBody
    public AssembleJSON fileUpload(@RequestParam("fileName") MultipartFile file){
        AssembleJSON json = null;
        if(file.isEmpty()){
           throw new CntenException(this,"-001","文件获取失败");
        }
        Attachment attachment = null;
        try {
            attachment = saveAttachment(file);
            json = AssembleJSON.SUCCESS(attachment);
        } catch (Exception e) {
            //e.printStackTrace();
            json = AssembleJSON.FAILURE("附件存储异常",e.getMessage());
        }
        return json;
    }


    public Attachment saveAttachment(MultipartFile file) throws Exception{
        Attachment attachment = new Attachment();
        attachment.setFileName(file.getOriginalFilename());
        String fileType = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."),file.getOriginalFilename().length());
        attachment.setAttachmentType(fileType);
        attachment.setIsDelete(0);
        //attachment.setUserId(getCurrUserData().getUserId());
        attachment.setAttachmentContent(file.getBytes());
        attachment.setFileSize((int)file.getSize());
        attachment.setCreateDate(new Date());
        attachment =  service.insert(attachment);
        attachment.setAttachmentContent(null);
        return attachment;
    }

    /**
     * 实现多文件上传
     *
     * 多文件上传，只返回成功。返回结果包含多个文件存储的结果，如果某个结果为null 就证明该文件存储失败
     * */
    @RequestMapping("multiFileUpload")
    @ResponseBody
    public AssembleJSON multiFileUpload(HttpServletRequest request){
        List files = ((MultipartHttpServletRequest)request).getFiles("fileName");
        if(files.size()windowH*scale) {//判断图片高度
            imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
            imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
            if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                imgWidth = windowW*scale;//再对宽度进行缩放
            }
        } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
            imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
            imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
        } else {//如果图片真实高度和宽度都符合要求，高宽不变
            imgWidth = realWidth;
            imgHeight = realHeight;
        }
        $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

        var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
        var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
        $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
    });

    $(outerdiv).click(function(){//再次点击淡出消失弹出层
        $(this).fadeOut("fast");
    });
}

    $("#upload").click(function () {
        var imgId = $("#imgId").val();
        if(imgId == null || imgId == ""){
            //未上传过
            var formData = new FormData();
            formData.append("fileName", $("[name=fileName]")[0].files[0]);
            $.ajax({
                url: _self.uploadUrl,
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (data) {
                    if (data.code == 0) {
                        var attachmentId = data.data.attachmentId;
                        $Core.UI.message.success("上传成功！");
                        $("#imgId").val(attachmentId);
                        setImgPreview(attachmentId);
                    }
                    if (data.code != 0) {
                        $Core.UI.message.warning(data.msg);
                    }
                },
                error: function () {
                    $Core.UI.message.success("上传失败！");
                }
            });
        }else{
            //上传过，进行修改
            var id = $("#id").val();
            if(id == null || id == ""){
                //进行的是添加操作
                var formData = new FormData();
                formData.append("fileName", $("[name=fileName]")[0].files[0]);
                $.ajax({
                    url: _self.uploadUrl,
                    type: "POST",
                    data: formData,
                    /**
                     *必须false才会自动加上正确的Content-Type
                     */
                    contentType: false,
                    /**
                     * 必须false才会避开jQuery对 formdata 的默认处理
                     * XMLHttpRequest会对 formdata 进行正确的处理
                     */
                    processData: false,
                    success: function (data) {
                        if (data.code == 0) {
                            var attachmentId = data.data.attachmentId;
                            $.post("plugs/attVO/del?ids=" + imgId, function (data) {
                                $("#imgId").val(attachmentId);
                                setImgPreview(attachmentId);
                                $Core.UI.message.success("上传成功！");
                            });
                        }
                        if (data.code != 0) {
                            $Core.UI.message.warning(data.msg);
                        }
                    },
                    error: function () {
                        $Core.UI.message.success("上传失败！");
                    }
                });
            }else{
                //进行的是修改操作
                $.messager.confirm("提示","上传后原有图片将删除，是否上传",function (r) {
                    if(r) {
                        var formData = new FormData();
                        formData.append("fileName", $("[name=fileName]")[0].files[0]);
                        $.ajax({
                            url: _self.uploadUrl,
                            type: "POST",
                            data: formData,
                            /**
                             *必须false才会自动加上正确的Content-Type
                             */
                            contentType: false,
                            /**
                             * 必须false才会避开jQuery对 formdata 的默认处理
                             * XMLHttpRequest会对 formdata 进行正确的处理
                             */
                            processData: false,
                            success: function (data) {
                                if (data.code == 0) {
                                    var attachmentId = data.data.attachmentId;
                                    $.post("security/publicservicesuser/upd",{"id":id,"imgId":imgId}, function (data) {
                                        $("#imgId").val(attachmentId);
                                        $Core.UI.message.success("上传成功！");
                                        setImgPreview(attachmentId);
                                        //删除原有数据
                                        $.post("plugs/attVO/del?ids=" + imgId, function (data) {
                                        });
                                    });
                                }
                                if (data.code != 0) {
                                    $Core.UI.message.warning(data.msg);
                                }
                            },
                            error: function () {
                                $Core.UI.message.success("上传失败！");
                            }
                        });
                    }
                });
            }
        }
    });

    function setImgPreview(imgId) {
        var imghtml = '照片预览:'+
            ''+
            ''+
            ''
        $("#picPreview").html(imghtml);
        //查看大图
        $("#pimg").on('click',function(){
            var _this = $(this);//将当前的pimg元素作为_this传入函数
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        });
    }

    

        

            
        
    
    
        

            
                
                保存