使用webUploader上传图片(用js触发选择图片)

webuploader的优点是几乎支持所有的平台,pc端支持ie6+,支持IOS和Android,它可以自动压缩图片(仅支持jpeg,在某些参数设置下用肉眼不能看出压缩之后的差别,最多可缩小60倍),生成base64地址编码,能根据平台自动切换flash或H5上传。

通常情况下,需要给一个特定div绑定一个onclick事件,当然这些都是webUploader内部完成的。先看主要代码:

var server = r.host;
        var swf = 'http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf';
        var object = '';
        var base64Src = '';

        var uploader = WebUploader.create({
            auto: true,
            swf: swf,
            server: server,
            pick: domId,
            duplicate:true,
            compress:{
                width: 800,
                height: 800,
                quality: 90,
                allowMagnify: false,
                crop: false,
                preserveHeaders: true,
                noCompressIfLarger: false,
                compressSize: 50
            },
            thumb:{
                width: 800,
                height: 800,
                quality: 70,
                allowMagnify: true,
                crop:false,
                type: 'image/jpeg'
            },
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            }
        });

        uploader.on( 'fileQueued', function( file ) {
            var loading = layer.load(2);

            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    alert('不能预览');
                    layer.close(loading);
                }else{
                    base64Src = src;
                    previewCallback(src);
                    layer.close(loading);
                }
            });
        });

        uploader.on('uploadBeforeSend', function (obj, data, headers) {
            delete r.host;

            data = $.extend(data,r);
            data.key = object = data.key + '/' + uuid(16) + '.jpg';

            headers['Access-Control-Allow-Origin'] = "*";
        });

        uploader.on( 'uploadSuccess', function( file,response ) {
            $.post(bao.dealWithObject,{object:object},function(r){
                if(r.code == 1){
                    setCallback(r.data);//image_id
                    mergeCallback(base64Src, r.data);
                }
            });
        });

        uploader.on( 'uploadError', function( file ) {
            alert('上传图片失败,请重试');
        });

看以看到,webUploader把选择、预览、上传几个步骤分开了,要分别写到不同的函数里。这里有一个技巧,就是预览和上传分开,这样用户看到图片的速度会很更快,而图片在另一个函数里异步上传,用户是没有感知的。

webUploader如果能结合OSS或者7牛,可以直接把图片上传到图片服务器,将不会占用应用服务器的贷款和性能。

这需要一个验签过程,具体办法是每次上传的时候去应用服务器取得签名,然后作为参数和图片一起上传到图片服务器。关键代码:

$.post(signatureUrl,{},function(r){
    if(r.code === 0){
        alert(r.msg);
    }else{
        var signature = {
            'key' : r.dir,
            'policy': r.policy,
            'OSSAccessKeyId': r.accessid,
            'success_action_status' : '200',
            'signature': r.signature,
            'host': r.host
        };
        callback(signature);
    }
});

可能不同的服务商代码不太一样,原理是相似的。这里也有一些技巧,比如把缓存时间设置成一个可接受的值,在一段时间内不用重复取值。

最后,有时候我们不想把选择图片的动作绑定到一个div上,或者我们上传的代码已经写好,只需要重构就可以了,这个时候我们需要用js触发上传图片的动作。

尝试过调用picker下的div,没有作用,也去github上提过issues,但是没有回应。无意中发现可以这样解决:

<button onclick='trigger()'>trigger</button>
<button id="picker" style="display:hone">picker</button>
<script>
var uploader = WebUploader.create({
    auto: true,
    swf: swf,
    server: server,
    pick: '#picker'
});
function trigger(){
    $('#picker').find('input').click();
}
</script>

这样就可以触发选择图片的动作了,也就是说,可以用js触发,但是,总得有鼠标点一下。

推荐阅读更多精彩内容

  • 小宇说:最爱王石。 非常高兴,也非常,感觉非常特别。即将过去的2016年,和大家在这里共祝,从大家的呼声当中呢,感...
    燕飞宇阅读 419评论 0 1
  • 阿金与妻商量决定:明天(2015年3月22日)接老家岭下亲房的老弟和弟媳们到县城来欢聚欢聚,喝喝酒水,以表亲房众弟...
    镇南方良金阅读 47评论 0 1