前台图片压缩成大图、小图,然后上传

示例展示

使用示例代码

1.指定ws://对应后台Receiver,指定http://对应后台AjaxReceiver

            /**大小图片前台处理,后台简单处理模式,上传成功后显示图片**/
var uploader = $('#uploadBtn').uploader({
    url: 'ws://www.gongjuji.net/common/upload',
    fileExts: 'jpg;png',
    text: '大小图模式上传',
    more: true,//是否可以上传多个
    auto: true, //是否自动上传
    type: 'imgdouble',
    minWidth: 100,
    minHeight: 100,
    maxWidth: 800,
    maxHeight: 600,
    handleType: '0',//对于大小图模式最好不要自动处理
    subfolder: 'touxiang',
    onSuccess: function (data) {
        //添加到列表,每个图片上传成功都会触发
        var row = $('.row');
        var col = $(' <div class="col-xs-6 col-md-3" />');
        var a = $('<a class="thumbnail" />');
        a.attr('href',  data.big.relativeName);
        a.attr('title', '点击查看大图').attr('target','_blank');
        a.append('<img src='  + data.small.relativeName + ' />');
        col.append(a);
        row.append(col);
    }
});

定义按钮

<div class="uploader uploader-warning" id="uploadBtn"></div>