webuploader配置

 1 <!--引入CSS--> 2 <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> 3 ?4 <!--引入JS--> 5 <script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
 6 $(function() { 7 ?8 ????????????var $list=$("#thelist"); ?????9 ????????????var $btn =$("#commit_btu"); ??//开始上传按钮10 ????????????var thumbnailWidth = 1; ??//缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档 ?11 ????????????var thumbnailHeight = 1; ?12 ????????????var uploader = WebUploader.create({13 ????????????????// swf文件路径14 ????????????????swf:‘plugins/webuploader/Uploader.swf‘,15 16 ????????????????// 文件接收服务端。17 ????????????????server: ‘${pageContext.request.contextPath }/model/addPath.do‘,18 19 ????????????????// 选择文件的按钮。可选。20 ????????????????// 内部根据当前运行是创建，可能是input元素，也可能是flash.21 ????????????????pick: ‘#picker‘, //上传按钮监听（picker是上传按钮的id）22 ????????????????duplicate :true,//允许重复上传23 ????????????????method: ‘POST‘,24 ????????????????fileNumLimit:1, //限制上传文件队列的大小，超出范围则不允许添加25 ????????????????// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！26 27 ????????????????compress:{28 ????????????????????width:320,29 ????????????????????height:170,30 ????????????????????quality:70,31 ????????????????????allowMagnify:true,32 ????????????????????crop:true33 ????????????????},34 ?????????????????accept:{35 ????????????????????title: ‘image‘,36 ????????????????????extensions: ‘jpeg,jpg,png‘,37 ????????????????????mimeTypes: ‘image/jpg,image/jpeg,image/png‘38 ????????????????},39 ????????????????auto:false40 ????????????});41 ????????????// 当有文件添加进来的时候42 ????????????uploader.on( ‘fileQueued‘, function( file ) {43 ????????????????var $li = $(‘<div id="‘ + file.id + ‘" class="item">‘ +44 ????????????????????????‘<div><img id=\‘showImg\‘ style="width:320px;height:170px;border: 5px solid #ddd;"></div>‘ 45 ?????????????????????????+‘</div>‘+ file.name),46 ????????????????$img = $li.find(‘img‘);47 ????????????????$("#thelist").html( $li );48 ????????????????// 创建缩略图49 ????????????????// 如果为非图片文件，可以不用调用此方法。50 ????????????????// thumbnailWidth x thumbnailHeight 为 1 x 10051 ????????????????uploader.makeThumb( file, function( error, src ) {52 ????????????????????if ( error ) {53 ????????????????????????$img.replaceWith(‘<span>不能预览</span>‘);54 ????????????????????????return;55 ????????????????????}56 ????????????????????$img.attr( ‘src‘, src );57 ????????????????}, thumbnailWidth, thumbnailHeight );58 ????????????});59 ????????????//手动上传，60 ????????????$btn.on(‘click‘, function() {61 ????????????????var name = $("#name").val();//广告名称62 ????????????????var url = $("#url").val(); //外链接63 ????????????????if(name==‘‘ || url==‘‘){64 ????????????????????alert("内容不能为空");65 ????????????????}else if(uploader.getFiles().length==0){66 ????????????????????alert("还未选择上传的图片");67 ????????????????}else{68 ????????????????????uploader.upload();//开始上传图片69 ????????????????}70 ????????????});71 ????????????//选择图片完成前，每次选择图片加入队列的时候重置队列，保证队列中只有一张图片，72 ????????????uploader.on(‘beforeFileQueued‘,function(){73 ????????????????uploader.reset();//为了保证每次队列只上传一张图片，并且不让队列堵塞，所以每次重新选择一张图片之前都会对文件队列尽心一次重置，保证队列为空74 ????????????});75 ????????????//上传成功76 ????????????uploader.on( ‘uploadSuccess‘, function( file,response ) {77 ????????????????$( ‘#‘+file.id ).find(‘p.state‘).text(‘已上传‘);78 ????????????????$("#thelist").find("img").attr("src",response._raw);79 ????????????????save_img();//图片上传成功后提交数据并保存到数据库（这是自定义方法）80 ????????????});81 ????????????//上传失败 ???82 ????????????uploader.on( ‘uploadError‘, function( file ) {83 ????????????????$( ‘#‘+file.id ).find(‘p.state‘).text(‘上传出错,提交失败‘);84 ????????????});85 });86 </script>