webuploader配置

做图片上传的时候用webuploader是个不错的选择，他可以通过简单的配置实现图片的上传预览和处理。

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
$(function() {
 8             var $list=$("#thelist");     
            var $btn =$("#commit_btu");   //开始上传按钮
            var thumbnailWidth = 1;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档  
            var thumbnailHeight = 1;  
            var uploader = WebUploader.create({
                // swf文件路径
                swf:'plugins/webuploader/Uploader.swf',

                // 文件接收服务端。
                server: '${pageContext.request.contextPath }/model/addPath.do',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker', //上传按钮监听（picker是上传按钮的id）
                duplicate :true,//允许重复上传
                method: 'POST',
                fileNumLimit:1, //限制上传文件队列的大小，超出范围则不允许添加
                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
27                 compress:{
                    width:320,
                    height:170,
                    quality:70,
                    allowMagnify:true,
                    crop:true
                },
                 accept:{
                    title: 'image',
                    extensions: 'jpeg,jpg,png',
                    mimeTypes: 'image/jpg,image/jpeg,image/png'
                },
                auto:false
            });
            // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {
                var $li = $('<div id="' + file.id + '" class="item">' +
                        '<div><img id=\'showImg\' style="width:320px;height:170px;border: 5px solid #ddd;"></div>' 
                         +'</div>'+ file.name),
                $img = $li.find('img');
                $("#thelist").html( $li );
                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 1 x 100
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr( 'src', src );
                }, thumbnailWidth, thumbnailHeight );
            });
            //手动上传，
            $btn.on('click', function() {
                var name = $("#name").val();//广告名称
                var url = $("#url").val(); //外链接
                if(name=='' || url==''){
                    alert("内容不能为空");
                }else if(uploader.getFiles().length==0){
                    alert("还未选择上传的图片");
                }else{
                    uploader.upload();//开始上传图片
                }
            });
            //选择图片完成前，每次选择图片加入队列的时候重置队列，保证队列中只有一张图片，
            uploader.on('beforeFileQueued',function(){
                uploader.reset();//为了保证每次队列只上传一张图片，并且不让队列堵塞，所以每次重新选择一张图片之前都会对文件队列尽心一次重置，保证队列为空
            });
            //上传成功
            uploader.on( 'uploadSuccess', function( file,response ) {
                $( '#'+file.id ).find('p.state').text('已上传');
                $("#thelist").find("img").attr("src",response._raw);
                save_img();//图片上传成功后提交数据并保存到数据库（这是自定义方法）
            });
            //上传失败    
            uploader.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错,提交失败');
            });
});
</script>

这是做单张图片上传的webuploader配置，