图片上传webuploader

/** * 基于jquery的图片上传控件 */!function ($) {

    "use strict";    //定义上传事件    var upImgEvent = {        fileQueued: ‘fileQueued‘,//文件加载的时候触发        //statusChange: ‘statuschange‘,        uploadSuccess: ‘uploadSuccess‘,//文件上传成功触发默认路径应该是固定的        uploadError: ‘uploadError‘,//文件上传报错触发        error: ‘error‘//文件上传验证报错的时候触发,比如大小,上传重复图片    };

    //定义内部使用函数    var _util = {        _isSupportImage: function () {            var data = new Image();            var support = true;            data.onload = data.onError = function () {                if (this.width != 1 || this.height != 1) {                    support = false;                }            };            data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";            return support;        }(),        _renderHtml: function (file) {            return $(‘<div class="file_img" id="‘ + file.id + ‘">‘ +            ‘<div class="delete"><a href="javascript:deleteImg(\‘‘ + file.id + ‘\‘,1)">删除</a></div>‘ +            ‘<span style="vertical-align: middle; display: inline-block; height: 100%;"></span>‘ +            ‘<img id="img‘ + file.id + ‘"  title="‘ + file.name + ‘" src="‘ + window.base + ‘/resources/images/loading_.gif" /> ‘ +            ‘<div id="wart" style="position:absolute;z-index:99;left:5px;top:10px;"><span style="color: blue">图片正在上传.请等待...</span><div>‘+            ‘</div>‘)        },        _showError: function (code) {            $(‘body‘).hideLoading();            $("img").next().remove();            var text = null;            switch (code) {                case ‘exceed_size‘:                    text = ‘文件太大了..请重新上传‘;                    break;                case ‘interrupt‘:                    text = ‘上传暂停..‘;                    break;                default:                    text = ‘上传失败，请重试...‘;                    break;            }            alert(text);        }    };

    var Img = function (element, options) {        var imgRadio = {            //图片属性            _ratio: function () {                if (window.devicePixelRatio) {                    return window.devicePixelRatio;                } else {                    return 1;                }            },  //像素比例            thumbWidth: 140 * this._ratio,            thumbHeight: 140 * this._ratio        };        //构造默认options        var defaultOption = {            packId:"#"+options.packId,            swf: window.base + ‘/resources/js/webuploader/Uploader.swf‘,//ie6,7,8 需要flash支持，默认优先Html5            server: "http://localhost:8080/person"+options.uploadPath,//文件上传的服务器路径            pick: {                id: "#"+options.uploaderId,                multiple: options.isMultiple//是否单选            },            duplicate: true,//可以重复            sendAsBinary: true,//android4 有些机型必须开启 为了兼容 都启用这种模式            auto: true,//开启选择图片自动上传            fileVal: ‘bin‘,//文件上传字段名称            fileSingleSizeLimit: 10 * 1024 * 1024,  //10M 单个图片只能最大10M            disableGlobalDnd: true,//不能拖拽            accept: {                //上传图片所支持的类型                title: "上传图片",                extensions: ‘gif,jpg,jpeg,bmp,png‘,                mimeTypes: ‘image/*‘            },            resize: false,//不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！            //压缩            compress: {                width: 1600,                height: 1600,                // 图片质量，只有type为`image/jpeg`的时候才有效。                quality: 90,                // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.                allowMagnify: false,                // 是否允许裁剪。                crop: false,                // 是否保留头部meta信息。                preserveHeaders: true,                // 如果发现压缩后文件大小比原来还大，则使用原来图片                // 此属性可能会影响图片自动纠正功能                noCompressIfLarger: false,                // 单位字节，如果图片大小小于此值，不会采用压缩。                compressSize: 1024 * 1024 * 1            },            callback:undefined || options.callback,            success:undefined || options.success        };        this.init(defaultOption,imgRadio);    };    Img.prototype.init = function (options,radio) {        var uploader = WebUploader.create(options);        //构造监听事件        uploader.on(upImgEvent.fileQueued, function (file) {            $(‘body‘).showLoading();            $(options.pick.id).showLoading();            if (file.getStatus() === ‘invalid‘) {                _util._showError(file.statusText);            }            if(options.callback!=undefined && options.callback instanceof Function){                this.makeThumb(file, function (error, src) {                    if (error) {                        console.log("can not preview :" + error);                        return;                    }                    if (_util._isSupportImage) {                        options.callback.apply(this,[file,src]);                    }                }, radio.thumbWidth, radio.thumbHeight);            }else{                var html = _util._renderHtml(file);                //构造预览图                this.makeThumb(file, function (error, src) {                    var img = $("#img" + file.id);                    if (error) {                        console.log("can not preview :" + error);                        return;                    }                    if (_util._isSupportImage) {                        img.empty().attr(‘src‘, src);                    }                }, radio.thumbWidth, radio.thumbHeight);                html.appendTo($(options.packId));            }        });        uploader.on(upImgEvent.uploadSuccess, function (file, response) {            if (response.success) {                $(‘body‘).hideLoading();                $(options.pick.id).hideLoading();                $("img").next().remove();                var imgResponse = response.data;                if(options.success!=undefined && options.success instanceof Function){                    options.success.apply(this,[file,imgResponse]);                }            }else{                $(‘body‘).hideLoading();                $("img").next().remove();                alert(response.msg);            }        });        uploader.on(upImgEvent.uploadError, function (file) {            $(‘body‘).hideLoading();            $("img").next().remove();            alert("文件上传失败" + file.name);        });        uploader.on(upImgEvent.error, function (code) {            $(‘body‘).hideLoading();            $("img").next().remove();            if (code === ‘F_DUPLICATE‘)                alert("文件已经存在.请换个图片重新上传...");            else if (code === ‘F_EXCEED_SIZE‘)                alert("文件不能超过10M,请重新上传");            else if (code === ‘Q_TYPE_DENIED‘)                alert("文件类型只能是图片类型,请重新上传");            else                alert("error type :" + code);        });    };    $.webUploader = function (options) {        return new Img(this, options);    }}(window.jQuery);function deleteImg(id, type){    $("#" + id).remove();    //如果是sybd则显示上传插件    if (type == 1) {        $("#sybd").parent().show();    }}