webupload附件上传插件

webupload附件上传插件

(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);

  <table style="margin: auto" id="submit_table">
                <tr>
                        <td colspan="9">
                        <label style="font-size:15px;">  上传附件:</label>
                            <input id="attchmentId" name="attchmentId" />
                        </td>
                    </tr>
  </table>


$("#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 ($) {
    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 = $('<input type="hidden" class="textbox-value" value="">');
            $textbox.attr("name", name);

            $htmlUpload = $('<div class="webupload"><div class="uploader">' +
                '<div class="command">' +
                '<div class="uploader-picker">上传文件</div> ' +
                //'<button type="button" class="uploader-up btn btn-primary">开始上传</button> ' +
                //'<button type="button" class="uploader-retry btn btn-primary">全部重试</button> ' +
                // '<button type="button" class="uploader-clear ">' +
                //    '<i class="glyphicon glyphicon-trash"></i> 清空所有</button>' +
                '</div><div class="uploader-list"></div></div></div>'
            );
            $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 = $('<p class="progress"><span></span></p>')
                            .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('<a title="下载" href = "' +
                            DOWN_PATH +
                            response.data.attachmentId +
                            '" class="btn btn-default btn-xs pull-right" > ' +
                            '<i class="fa fa-cloud-download" ></i> ' +
                            '</a>');
                    }
                    $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 = $('<div class="error"></div>').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");
        }
    }
    /*
    '<a href = "#" class="btn btn-default btn-xs pull-right" > ' +
        '<i class="fa fa-cloud-download" ></i> ' +
        '</a>' +
    * /
    /**
     * 
     * @param {any} uploader
     * @param {any} file
     */
    function createFileItem(uploader, file, opts) {
        var $li = $((
            '<div id="{0}" class="file-item">' +
            '<span class="mailbox-attachment-icon"><i class= "fa fa-file-pdf-o" ></i></span>' +
            ' <div class="info">' +
            '<i class= "fa fa-paperclip" ></i > ' +
            '<a href="#" class="attachment-name" title="{1}">{1}</a> ' +
            '<span class="attachment-size"> ' +
            '<span>{2}</span> ' +
            '<a href="#" class="btn btn-default btn-xs pull-right filedel">' +
            '<i class="fa fa-close"></i>' +
            '</a>' +
            '</span>' +
            '</div >' +
            '</div>').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('<a title="下载" href = "' + DOWN_PATH + file.attachmentId +
                '" class="btn btn-default btn-xs pull-right" > ' +
                '<i class="fa fa-cloud-download" ></i> ' +
                '</a>');
        }
        $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 = $("<img>").appendTo($attachmentIcon);
                    if (file.attachmentId) {
                        $img.attr("src", DOWN_PATH + file.attachmentId);
                    } else {
                        uploader.makeThumb(file,
                            function (error, src) {
                                if (error) {
                                    $img.replaceWith('<span>不能预览</span>');
                                    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: '<img src="' + $img.attr("src") + '" style="width:100%" />'
                        });
                    });
                    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<AttachmentService,Attachment> {
	@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<MultipartFile> files = ((MultipartHttpServletRequest)request).getFiles("fileName");
        if(files.size()<=0){
            throw new CntenException(this,"-001","文件获取失败");
        }
        List<Attachment> dataList = new ArrayList<Attachment>();
        Attachment attachment = null;
        for (MultipartFile file: files) {
            try {
                attachment =  saveAttachment(file);
            } catch (Exception e) {
                e.printStackTrace();
                attachment = new Attachment();
            }
            dataList.add(attachment);
        }
        return AssembleJSON.SUCCESS(dataList);
    }

    @GetMapping("/get/{attId}")
    public void download(@PathVariable Integer attId, HttpServletResponse response) throws IOException {
		Attachment attachment = service.getById(attId);
        String fileName = new String(attachment.getFileName().getBytes("UTF-8"),"ISO8859-1");//中文需要编码下
        response.addHeader("Content-Disposition", "attachment;filename=" + fileName);
        response.addHeader("Content-Type","application/octet-stream;charset=UTF-8");
        ServletOutputStream out = response.getOutputStream();
        out.write(attachment.getAttachmentContent());
        out.flush();
        out.close();
    }
  
    @GetMapping("/getByIds/{attIds}")
    @ResponseBody
    public AssembleJSON getVOByIds(@PathVariable String attIds){
    	if("null".equals(attIds) || "".equals(attIds)){
    		return AssembleJSON.FAILURE("参数错误");
    	}
    	String[] strings = attIds.split(",");
    	List<AttachmentVO> list = new ArrayList<>();
    	for(String id : strings){
    		AttachmentVO attachmentVO = attachmentVOService.getById(Integer.parseInt(id));
    		list.add(attachmentVO);
    	}
    	return AssembleJSON.SUCCESS(list);
    }

补充

var EditView = function(){
this.uploadUrl = getUploadUrl();
this.init = function(){
 function getUploadUrl() {
        var serviceUrl = $Core.SERVICEPATH();
        var preffix = serviceUrl.substring(0,serviceUrl.lastIndexOf("cnten"));
        var uploadUrl = preffix + "zuul/cnten/plugs/attachment/fileUpload";
        return uploadUrl;
    }
};

function imgShow(outerdiv, innerdiv, bigimg, _this){
    var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
    $(bigimg).attr("src", src);//设置#bigimg元素的src属性

    /*获取当前点击图片的真实大小，并显示弹出层及大图*/
    $("<img/>").attr("src", src).load(function(){
        var windowW = $(window).width();//获取当前窗口宽度
        var windowH = $(window).height();//获取当前窗口高度
        var realWidth = this.width;//获取图片真实宽度
        var realHeight = this.height;//获取图片真实高度
        var imgWidth, imgHeight;
        var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

        if(realHeight>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 = '<th style="width: 70px">照片预览:</th>'+
            '<td style="width: 670px" colspan="7">'+
            '<img id="pimg" src="'+$Core.SERVICEPATH()+'plugs/attachment/get/'+imgId+'" style="height: 90px; width: 90px;">'+
            '</td>'
        $("#picPreview").html(imghtml);
        //查看大图
        $("#pimg").on('click',function(){
            var _this = $(this);//将当前的pimg元素作为_this传入函数
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        });
    }

    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>
    <nav class="navbar navbar-default navbar-fixed-bottom" style="width: 100%">
        <div class="footcommandbar" style="vertical-align: middle; line-height: 50px;text-align: right">
            <button type="button" id="btnSave" class="btn btn-primary">
                <i class="glyphicon glyphicon-save"></i>
                保存
            </button>
        </div>
    </nav>