本文为大家讲解了如何使用webuploader客户端批量 上传图片 ，供大家参考，具体内容如下
因为最近主管让用webuploader写客户端，但是在网上找了很多，能够复制就能用的并没有几个，但是经过修改后还可以，为了后面的人在需要使用到的时候可以直接copy我再此将代码和注释共享在这里。
|
1 2 3 4 |
<!--需要引入的文件--> <link rel= "stylesheet" type= "text/css" href= "css/webuploader.css" /> <script type= "text/javascript" src= "js/jquery-1.9.1.min.js" ></script> <script type= "text/javascript" src= "js/webuploader.min.js" ></script> |
这里是前台代码，这里我不过是加了个注释和修改了一点东西，这是网络上某个大神的代码 我借鉴一下。
这个webuploader 使用其实很简单，我先简单做一个描述。理解就很快了。
先准备好选择文件的元素吧，还有显示缩略图的元素，当然还有手动才需要的一个提交按钮。
第一步： js中是先创建一个webuploaer的对象，创建的时候对象有许多参数，你参数的选择决定了你启动哪些功能。
第二步： loader对象有很多的事件，你可以通过为loader绑定不同的事件，就可以监听到不同的动作了，从而对它进行相应的操作。
第三步： 就是使用该对象的upload()方法进行手动的上传啦！
至于我刚刚说的很多参数和很多事件。
我会附上一个webuploaderapi的地址，上面写的非常详细，阅读量也不大。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
<body>
<h3>图片上传</h3> <!--dom结构部分--> <div id= "uploader-demo" > <!--用来存放item--> <div id= "filelist" class = "uploader-list" ></div> <div id= "upinfo" ></div> <div id= "filepicker" >选择文件</div> </div> <input type= "button" id= "btn" value= "开始上传" > <script> // 图片上传demo jquery(function() { var $ = jquery, $list = $( '#filelist' ), // 优化retina, 在retina下这个值是2 ratio = window.devicepixelratio || 1 , // 缩略图大小 thumbnailwidth = 100 * ratio, thumbnailheight = 100 * ratio, // web uploader实例 uploader; // 初始化web uploader uploader = webuploader.create({ // 自动上传。 auto: false , // swf文件路径 swf: 'js/uploader.swf' , // 文件接收服务端。 server: 'uploader' , threads: '5' , //同时运行5个线程传输 filenumlimit: '10' , //文件总数量只能选择10个
// 选择文件的按钮。可选。 pick: {id: '#filepicker' , //选择文件的按钮 multiple: true }, //允许可以同时选择多个图片 // 图片质量，只有type为`image/jpeg`的时候才有效。 quality: 90 ,
//限制传输文件类型，accept可以不写 accept: { title: 'images' , //描述 extensions: 'gif,jpg,jpeg,bmp,png,zip' , //类型 mimetypes: 'image/*' //mime类型 } });
// 当有文件添加进来的时候，创建img显示缩略图使用 uploader.on( 'filequeued' , function( file ) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>' ), $img = $li.find( 'img' );
// $list为容器jquery实例 $list.append( $li );
// 创建缩略图 // 如果为非图片文件，可以不用调用此方法。 // thumbnailwidth x thumbnailheight 为 100 x 100 uploader.makethumb( file, function( error, src ) { if ( error ) { $img.replacewith( '<span>不能预览</span>' ); return ; }
$img.attr( 'src' , src ); }, thumbnailwidth, thumbnailheight ); });
// 文件上传过程中创建进度条实时显示。 uploadprogress事件：上传过程中触发，携带上传进度。 file文件对象 percentage传输进度 nuber类型 uploader.on( 'uploadprogress' , function( file, percentage ) { var $li = $( '#' +file.id ), $percent = $li.find( '.progress span' );
// 避免重复创建 if ( !$percent.length ) { $percent = $( '<p class="progress"><span></span></p>' ) .appendto( $li ) .find( 'span' ); }
$percent.css( 'width' , percentage * 100 + '%' ); });
// 文件上传成功时候触发，给item添加成功class, 用样式标记上传成功。 file：文件对象， response：服务器返回数据 uploader.on( 'uploadsuccess' , function( file,response) { $( '#' +file.id ).addclass( 'upload-state-done' ); //console.info(response); $( "#upinfo" ).html( "<font color='red'>" +response._raw+ "</font>" ); });
// 文件上传失败 file:文件对象 ， code：出错代码 uploader.on( 'uploaderror' , function(file,code) { var $li = $( '#' +file.id ), $error = $li.find( 'div.error' );
// 避免重复创建 if ( !$error.length ) { $error = $( '<div class="error"></div>' ).appendto( $li ); }
$error.text( '上传失败!' ); });
// 不管成功或者失败，文件上传完成时触发。 file： 文件对象 uploader.on( 'uploadcomplete' , function( file ) { $( '#' +file.id ).find( '.progress' ).remove(); });
//绑定提交事件 $( "#btn" ).click(function() { console.log( "上传..." ); uploader.upload(); //执行手动提交 console.log( "上传成功" ); });
}); </script> </body> |
然后这里是后台我使用spring封装方法写的接收数据， 这些代码复制就可以使用了，对了 这是一个接收多文件的方法，上面的客户端代码也支持多图片上传。其实图片和文件差别不大 不过是将客户端的文件限制去掉，当然缩略图也可以丢掉，那就是文件上传啦。具体还是看客户端的webuploaderapi。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
@requestmapping ( "uploader" ) public void upload(httpservletrequest request,httpservletresponse response){
system.out.println( "收到图片!" ); multiparthttpservletrequest murequest = (multiparthttpservletrequest)request; map<string, multipartfile> files = murequest.getfilemap(); //得到文件map对象 string upaloadurl = request.getsession().getservletcontext().getrealpath( "/" )+ "upload/" ; //得到当前工程路径拼接上文件名 file dir = new file(upaloadurl); system.out.println(upaloadurl); if (!dir.exists()) //目录不存在则创建 dir.mkdirs(); for (multipartfile file :files.values()){ counter++; filename=file.getoriginalfilename(); tagetfile = new file(upaloadurl+filename); //创建文件对象 if (!tagetfile.exists()){ //文件名不存在 则新建文件，并将文件复制到新建文件中 try { tagetfile.createnewfile(); } catch (ioexception e) { e.printstacktrace(); } try { file.transferto(tagetfile); } catch (illegalstateexception e) { e.printstacktrace(); } catch (ioexception e) { e.printstacktrace(); }
} } system.out.println( "接收完毕" ); } |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
原文链接：https://blog.csdn.net/finalAmativeness/article/details/54668090
查看更多关于WebUploader客户端批量上传图片 后台使用springMVC的详细内容...