webuploader 实现图片批量上传功能附实例代码

1. <scripttype="text/javascript">
2. varimagepath=null;
3. functionarticle_save(){
4. alert("刷新父级的时候会自动关闭弹层。");
5. window.parent.location.reload();
6. }
7. /*项目发票-添加*/
8. functionarticle_add(title,url,w,h){
9. if(imagepath){
10. varindex=layer.open({
11. type:2,
12. title:title,
13. content:url+imagepath
14. });
15. layer.full(index);
16. }else{alert("没有上传图片，请先上传图片");}
17. }
18. $(function(){
19. $('.skin-minimalinput').icheck({
20. checkboxclass:'icheckbox-blue',
21. radioclass:'iradio-blue',
22. increasearea:'20%'
23. });
24. $list=$("#filelist"),$btn=$("#btn-star"),state="pending",
25. uploader;
26. varuploader=webuploader.create({
27. auto:true,
28. swf:'lib/webuploader/0.1.5/uploader.swf',//swf文件路径
29. //文件接收服务端。
30. server:'lib/webuploader/0.1.5/server/fileupload.php',//文件接收服务端。
31. //选择文件的按钮。可选。
32. //内部根据当前运行是创建，可能是input元素，也可能是flash.
33. pick:'#filepicker',
34. //不压缩image,默认如果是jpeg，文件上传前会压缩一把再上传！
35. resize:false,
36. //只允许选择图片文件。
37. accept:{
38. title:'images',
39. extensions:'gif,jpg,jpeg,bmp,png',
40. mimetypes:'image/*'
41. }
42. });
43. //当有文件被添加进队列的时候
44. uploader
45. .on(
46. 'filequeued',
47. function(file){
48. var$li=$('<divid="'+file.id+'"class="item">'
49. +'<divclass="pic-box"><img></div>'
50. +'<divclass="info">'
51. +file.name
52. +'</div>'
53. +'<pclass="state">等待上传…</p>'
54. +'</div>'),$img=$li.find('img');
55. $list.append($li);
56. //创建缩略图
57. //如果为非图片文件，可以不用调用此方法。
58. //thumbnailwidthxthumbnailheight为100×100
59. uploader.makethumb(file,function(error,src){
60. if(error){
61. $img.replacewith('<span>不能预览</span>');
62. return;
63. }
64. $img.attr('src',src);
65. },thumbnailwidth,thumbnailheight);
66. });
67. //文件上传过程中创建进度条实时显示。
68. uploader
69. .on(
70. 'uploadprogress',
71. function(file,percentage){
72. var$li=$('#'+file.id),$percent=$li
73. .find('.progress-box.sr-only');
74. //避免重复创建
75. if(!$percent.length){
76. $percent=$(
77. '<divclass="progress-box"><spanclass="progress-barradius"><spanclass="sr-only"style="width:0%"></span></span></div>')
78. .appendto($li).find('.sr-only');
79. }
80. $li.find(".state").text("上传中");
81. $percent.css('width',percentage*100+'%');
82. });
83. //文件上传成功，给item添加成功class,用样式标记上传成功。
84. uploader.on('uploadsuccess',function(file){
85. $('#'+file.id).addclass('upload-state-success')
86. .find(".state").text("已上传");
87. });
88. //文件上传失败，显示上传出错。
89. uploader.on('uploaderror',function(file){
90. $('#'+file.id).addclass('upload-state-error').find(".state")
91. .text("上传出错");
92. });
93. //完成上传完了，成功或者失败，先删除进度条。
94. uploader.on('uploadcomplete',function(file){
95. $('#'+file.id).find('.progress-box').fadeout();
96. });
97. uploader.on('all',function(type){
98. if(type==='startupload'){
99. state='uploading';
100. }elseif(type==='stopupload'){
101. state='paused';
102. }elseif(type==='uploadfinished'){
103. state='done';
104. }
105. if(state==='uploading'){
106. $btn.text('暂停上传');
107. }else{
108. $btn.text('开始上传');
109. }
110. });
111. $btn.on('click',function(){
112. if(state==='uploading'){
113. uploader.stop();
114. }else{
115. uploader.upload();
116. }
117. });
118. });
119. (function($){
120. //当domready的时候开始初始化
121. $(function(){
122. var$wrap=$('.uploader-list-container'),
123. //图片容器
124. $queue=$('<ulclass="filelist"></ul>').appendto(
125. $wrap.find('.queuelist')),
126. //状态栏，包括进度和控制按钮
127. $statusbar=$wrap.find('.statusbar'),
128. //文件总体选择信息。
129. $info=$statusbar.find('.info'),
130. //上传按钮
131. $upload=$wrap.find('.uploadbtn'),
132. //没选择文件之前的内容。
133. $placeholder=$wrap.find('.placeholder'),
134. $progress=$statusbar.find('.progress').hide(),
135. //添加的文件数量
136. filecount=0,
137. //添加的文件总大小
138. filesize=0,
139. //优化retina,在retina下这个值是2
140. ratio=window.devicepixelratio||1,
141. //缩略图大小
142. thumbnailwidth=110*ratio,thumbnailheight=110*ratio,
143. //可能有pedding,ready,uploading,confirm,done.
144. state='pedding',
145. //所有文件的进度信息，key为fileid
146. percentages={},
147. //判断浏览器是否支持图片的base64
148. issupportbase64=(function(){
149. vardata=newimage();
150. varsupport=true;
151. data.onload=data.onerror=function(){
152. if(this.width!=1||this.height!=1){
153. support=false;
154. }
155. }
156. data.src="data:image/gif;base64,r0lgodlhaqabaiaaaaaaap///ywaaaaaaqabaaacauwaow==";
157. returnsupport;
158. })(),
159. //检测是否已经安装flash，检测flash的版本
160. flashversion=(function(){
161. varversion;
162. try{
163. version=navigator.plugins['shockwaveflash'];
164. version=version.description;
165. }catch(ex){
166. try{
167. version=newactivexobject(
168. 'shockwaveflash.shockwaveflash')
169. .getvariable('$version');
170. }catch(ex2){
171. version='0.0';
172. }
173. }
174. version=version.match(/d+/g);
175. returnparsefloat(version[0]+'.'+version[1],10);
176. })(),
177. supporttransition=(function(){
178. vars=document.createelement('p').style,r='transition'ins
179. ||'webkittransition'ins
180. ||'moztransition'ins
181. ||'mstransition'ins||'otransition'ins;
182. s=null;
183. returnr;
184. })(),
185. //webuploader实例
186. uploader;
187. if(!webuploader.uploader.support('flash')
188. &&webuploader.browser.ie){
189. //flash安装了但是版本过低。
190. if(flashversion){
191. (function(container){
192. window['expressinstallcallback']=function(state){
193. switch(state){
194. case'download.cancelled':
195. alert('您取消了更新！')
196. break;
197. case'download.failed':
198. alert('安装失败')
199. break;
200. default:
201. alert('安装已成功，请刷新！');
202. break;
203. }
204. deletewindow['expressinstallcallback'];
205. };
206. varswf='expressinstall.swf';
207. //insertflashobject
208. varhtml='<objecttype="application/'
209. +'x-shockwave-flash"data="'+swf+'"';
210. if(webuploader.browser.ie){
211. html+='classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"';
212. }
213. html+='width="100%"height="100%"style="outline:0">'
214. +'<paramname="movie"value="'+swf+'"/>'
215. +'<paramname="wmode"value="transparent"/>'
216. +'<paramname="allowscriptaccess"value="always"/>'
217. +'</object>';
218. container.html(html);
219. })($wrap);
220. //压根就没有安转。
221. }else{
222. $wrap
223. .html('<ahref="http://www.adobe.com/go/getflashplayer"target="_blank"border="0"><imgalt="getflashplayer"src="http://www.adobe.com/macromedia/style_guide/images/160x41_get_flash_player.jpg"/></a>');
224. }
225. return;
226. }elseif(!webuploader.uploader.support()){
227. alert('webuploader不支持您的浏览器！');
228. return;
229. }
230. //实例化
231. uploader=webuploader.create({
232. pick:{
233. id:'#filepicker-2',
234. label:'点击选择图片'
235. },
236. formdata:{
237. uid:123
238. },
239. dnd:'#dndarea',
240. paste:'#uploader',
241. swf:'lib/webuploader/0.1.5/uploader.swf',
242. chunked:false,
243. chunksize:512*1024,
244. server:'invoicevo/news_uploder?&projectid=${projectid}',
245. //runtimeorder:'flash',
246. //accept:{
247. //title:'images',
248. //extensions:'gif,jpg,jpeg,bmp,png',
249. //mimetypes:'image/*'
250. //},
251. //禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
252. disableglobaldnd:true,
253. filenumlimit:300,
254. filesizelimit:200*1024*1024,//200m
255. filesinglesizelimit:50*1024*1024
256. //50m
257. });
258. //拖拽时不接受js,txt文件。
259. uploader.on('dndaccept',function(items){
260. vardenied=false,len=items.length,i=0,
261. //修改js类型
262. unallowed='text/plain;application/javascript';
263. for(;i<len;i++){
264. //如果在列表里面
265. if(~unallowed.indexof(items[i].type)){
266. denied=true;
267. break;
268. }
269. }
270. return!denied;
271. });
272. uploader.on('dialogopen',function(){
273. console.log('here');
274. });
275. //uploader.on('filesqueued',function(){
276. //uploader.sort(function(a,b){
277. //if(a.name<b.name)
278. //return-1;
279. //if(a.name>b.name)
280. //return1;
281. //return0;
282. //});
283. //});
284. //添加“添加文件”的按钮，
285. /*uploader.addbutton({
286. id:'#filepicker2',
287. label:'继续添加'
288. });*/
289. uploader.on('ready',function(){
290. window.uploader=uploader;
291. });
292. //当有文件添加进来时执行，负责view的创建
293. functionaddfile(file){
294. var$li=$('<liid="'+file.id+'">'
295. +'<pclass="title">'+file.name+'</p>'
296. +'<pclass="imgwrap"></p>'
297. +'<pclass="progress"><span></span></p>'+'</li>'),
298. $btns=$(
299. '<divclass="file-panel">'
300. +'<spanclass="cancel">删除</span>'
301. +'<spanclass="rotateright">向右旋转</span>'
302. +'<spanclass="rotateleft">向左旋转</span></div>')
303. .appendto($li),$prgress=$li
304. .find('p.progressspan'),$wrap=$li
305. .find('p.imgwrap'),$info=$('<pclass="error"></p>'),
306. showerror=function(code){
307. switch(code){
308. case'exceed_size':
309. text='文件大小超出';
310. break;
311. case'interrupt':
312. text='上传暂停';
313. break;
314. default:
315. text='上传失败，请重试';
316. break;
317. }
318. $info.text(text).appendto($li);
319. };
320. if(file.getstatus()==='invalid'){
321. showerror(file.statustext);
322. }else{
323. //@todolazyload
324. $wrap.text('预览中');
325. uploader
326. .makethumb(
327. file,
328. function(error,src){
329. varimg;
330. if(error){
331. $wrap.text('不能预览');
332. return;
333. }
334. if(issupportbase64){
335. img=$('<imgsrc="'+src+'">');
336. $wrap.empty().append(img);
337. }else{
338. $
339. .ajax(
340. 'lib/webuploader/0.1.5/server/preview.php',
341. {
342. method:'post',
343. data:src,
344. datatype:'json'
345. })
346. .done(
347. function(
348. response){
349. if(response.result){
350. img=$('<imgsrc="'+response.result+'">');
351. $wrap
352. .empty()
353. .append(
354. img);
355. }else{
356. $wrap
357. .text("预览出错");
358. }
359. });
360. }
361. },thumbnailwidth,thumbnailheight);
362. percentages[file.id]=[file.size,0];
363. file.rotation=0;
364. }
365. file.on('statuschange',function(cur,prev){
366. if(prev==='progress'){
367. $prgress.hide().width(0);
368. }elseif(prev==='queued'){
369. $li.off('mouseentermouseleave');
370. $btns.remove();
371. }
372. //成功
373. if(cur==='error'||cur==='invalid'){
374. console.log(file.statustext);
375. showerror(file.statustext);
376. percentages[file.id][1]=1;
377. }elseif(cur==='interrupt'){
378. showerror('interrupt');
379. }elseif(cur==='queued'){
380. percentages[file.id][1]=0;
381. }elseif(cur==='progress'){
382. $info.remove();
383. $prgress.css('display','block');
384. }elseif(cur==='complete'){
385. $li.append('<spanclass="success"></span>');
386. }
387. $li.removeclass('state-'+prev).addclass(
388. 'state-'+cur);
389. });
390. $li.on('mouseenter',function(){
391. $btns.stop().animate({
392. height:30
393. });
394. });
395. $li.on('mouseleave',function(){
396. $btns.stop().animate({
397. height:0
398. });
399. });
400. $btns
401. .on(
402. 'click',
403. 'span',
404. function(){
405. varindex=$(this).index(),deg;
406. switch(index){
407. case0:
408. uploader.removefile(file);
409. return;
410. case1:
411. file.rotation+=90;
412. break;
413. case2:
414. file.rotation-=90;
415. break;
416. }
417. if(supporttransition){
418. deg='rotate('+file.rotation
419. +'deg)';
420. $wrap.css({
421. '-webkit-transform':deg,
422. '-mos-transform':deg,
423. '-o-transform':deg,
424. 'transform':deg
425. });
426. }else{
427. $wrap
428. .css(
429. 'filter',
430. 'progid:dximagetransform.microsoft.basicimage(rotation='
431. +(~~((file.rotation/90)%4+4)%4)
432. +')');
433. }
434. });
435. $li.appendto($queue);
436. }
437. //负责view的销毁
438. functionremovefile(file){
439. var$li=$('#'+file.id);
440. deletepercentages[file.id];
441. updatetotalprogress();
442. $li.off().find('.file-panel').off().end().remove();
443. }
444. functionupdatetotalprogress(){
445. varloaded=0,total=0,spans=$progress.children(),percent;
446. $.each(percentages,function(k,v){
447. total+=v[0];
448. loaded+=v[0]*v[1];
449. });
450. percent=total?loaded/total:0;
451. spans.eq(0).text(math.round(percent*100)+'%');
452. spans.eq(1).css('width',math.round(percent*100)+'%');
453. updatestatus();
454. }
455. functionupdatestatus(){
456. vartext='',stats;
457. if(state==='ready'){
458. text='选中'+filecount+'张图片，共'
459. +webuploader.formatsize(filesize)+'。';
460. }elseif(state==='confirm'){
461. stats=uploader.getstats();
462. if(stats.uploadfailnum){
463. text='已成功上传'
464. +stats.successnum
465. +'张照片至xx相册，'
466. +stats.uploadfailnum
467. +'张照片上传失败，<aclass="retry"href="#"rel="externalnofollow"rel="externalnofollow">重新上传</a>失败图片或<aclass="ignore"href="#"rel="externalnofollow"rel="externalnofollow">忽略</a>'
468. }
469. }else{
470. stats=uploader.getstats();
471. text='共'+filecount+'张（'
472. +webuploader.formatsize(filesize)+'），已上传'
473. +stats.successnum+'张';
474. if(stats.uploadfailnum){
475. text+='，失败'+stats.uploadfailnum+'张';
476. }
477. }
478. $info.html(text);
479. }
480. functionsetstate(val){
481. varfile,stats;
482. if(val===state){
483. return;
484. }
485. $upload.removeclass('state-'+state);
486. $upload.addclass('state-'+val);
487. state=val;
488. switch(state){
489. case'pedding':
490. $placeholder.removeclass('element-invisible');
491. $queue.hide();
492. $statusbar.addclass('element-invisible');
493. uploader.refresh();
494. break;
495. case'ready':
496. $placeholder.addclass('element-invisible');
497. $('#filepicker2').removeclass('element-invisible');
498. $queue.show();
499. $statusbar.removeclass('element-invisible');
500. uploader.refresh();
501. break;
502. case'uploading':
503. $('#filepicker2').addclass('element-invisible');
504. $progress.show();
505. $upload.text('暂停上传');
506. break;
507. case'paused':
508. $progress.show();
509. $upload.text('继续上传');
510. break;
511. case'confirm':
512. $progress.hide();
513. $('#filepicker2').removeclass('element-invisible');
514. $upload.text('开始上传');
515. stats=uploader.getstats();
516. if(stats.successnum&&!stats.uploadfailnum){
517. setstate('finish');
518. return;
519. }
520. break;
521. case'finish':
522. stats=uploader.getstats();
523. if(stats.successnum){
524. alert('上传成功');
525. }else{
526. //没有成功的图片，重设
527. state='done';
528. location.reload();
529. }
530. break;
531. }
532. updatestatus();
533. }
534. uploader.onuploadprogress=function(file,percentage){
535. var$li=$('#'+file.id),$percent=$li
536. .find('.progressspan');
537. $percent.css('width',percentage*100+'%');
538. percentages[file.id][1]=percentage;
539. updatetotalprogress();
540. };
541. uploader.onfilequeued=function(file){
542. filecount++;
543. filesize+=file.size;
544. if(filecount===1){
545. $placeholder.addclass('element-invisible');
546. $statusbar.show();
547. }
548. addfile(file);
549. setstate('ready');
550. updatetotalprogress();
551. };
552. uploader.onfiledequeued=function(file){
553. filecount–;
554. filesize-=file.size;
555. if(!filecount){
556. setstate('pedding');
557. }
558. removefile(file);
559. updatetotalprogress();
560. };
561. /*获取服务器返回的数据*/
562. uploader.on('uploadsuccess',function(file,response){
563. alert(response.status);
564. if(response.status=="success"){
565. imagepath=response.filepath;
566. alert("文件保存路径："+response.filepath);
567. }elseif(response.status=="error")
568. alert(response.error);
569. });
570. uploader.on('all',function(type){
571. varstats;
572. //alert(type);
573. switch(type){
574. case'uploadfinished':
575. setstate('confirm');
576. break;
577. case'startupload':
578. setstate('uploading');
579. break;
580. case'stopupload':
581. setstate('paused');
582. break;
583. }
584. });
585. uploader.onerror=function(code){
586. alert('eroor:'+code);
587. };
588. $upload.on('click',function(){
589. if($(this).hasclass('disabled')){
590. returnfalse;
591. }
592. if(state==='ready'){//点击上传按钮，进入准备状态。
593. uploader.upload();//开始上传
594. }elseif(state==='paused'){
595. uploader.upload();
596. }elseif(state==='uploading'){
597. uploader.stop();
598. }
599. });
600. $info.on('click','.retry',function(){
601. uploader.retry();
602. });
603. $info.on('click','.ignore',function(){
604. alert('todo');
605. });
606. $upload.addclass('state-'+state);
607. updatetotalprogress();
608. });
609. })(jquery);
610. </script>

注意：

4、controller代码