使用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触发，但是，总得有鼠标点一下。