原生webupload 的载入

    webupload 的原理就是异步上传，先上传文件，在把路径保存在数据库中

1.引人css ，和js  /static/public/ 代表webupload的css所在目录

<link rel="stylesheet" type="text/css" href="http://fex.baidu.com/webuploader/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://fex.baidu.com/webuploader/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="/static/public/font-awesome/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="http://fex.baidu.com/webuploader/css/syntax.css">
<link rel="stylesheet" type="text/css" href="http://fex.baidu.com/webuploader/css/style.css">
<link rel="stylesheet" type="text/css" href="/static/public/webupload/webuploader.css">

<script type="text/javascript" src="http://fex.baidu.com/webuploader/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/static/public/webupload/webuploader.js"></script>

2.视图 按键

<div><button type="button" id="logo" class="btn btn-info btn-sm" style="margin-bottom: 30px;">点击选择图片</button>
<img src='' width="100" height="100" >
</div>

js 执行

$(function(){
    upload('logo','logo');
    upload('bg_img','bg_img');
});
function upload(filePicker,name) {
        var $ = jQuery,
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,

            // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            // Web Uploader实例
            uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 自动上传。
            auto: true,

            // swf文件路径
            swf: "{{asset('js/Uploader.swf')}}",

            // 文件接收服务端。
            server:'/banner/bannerUpload?type='+name , //写异步上传的方法

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#'+filePicker,

            // 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file,response) {
            alert(response.message);
            var src = response.data;
            // var name = response.name;

            var html='<input type="hidden" name="'+name+'" value="'+src+'"> ';
            $('#'+name).parent().find('img').attr('src',src);
            //找到logo
            $("#"+name).append(html);

           // console.dir()
            $( '#'+file.id ).addClass('upload-state-done');
        });

        // 文件上传失败，现实上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });
    }