webuploader上传图片插件案例

1.引入插件

 

<link rel="stylesheet" href="../../resources/js/plugins/webuploader-0.1.5/webuploader.css">
 
  1. <script src="../../resources/js/min/jquery-1.9.1.min.js"></script>

  2. <script src="../../resources/js/plugins/webuploader-0.1.5/webuploader.min.js"></script>

 

2.html

 

 

 
  1. <td width="125px" class="label-text text-right vertical-top">企业logo:</td>

  2. <td colspan="5">

  3. <img id="logoPriview" class="product-img" src="../../resources/img/supplier/default.png">

  4. <div class="upload-tip">

  5. * 本地图片,支持JPG、JPEG、PNG 格式,<br>

  6. 最佳长宽比例2:1, 图片大小不超过2M<br>

  7. <div id="logoUploadBtn" class="mgt5">

  8. </div>

  9. </div>

  10.  
  11. </td>

3.css

 

 
  1. .new-supplier .product-img{width:110px;height:110px;border-radius:6px;}

  2. .new-supplier .upload-tip{display:inline-block;padding-left:10px;vertical-align:bottom;line-height:18px;font-size:12px;color:#de4751;}

 

  1. /*按钮不能点击问题,直接在页面上设置样式最省事*/

  2. #logoUploadBtn div:nth-child(2){width:100%!important;height:100%!important;}

4.js

 
  1. $(function () {

  2. var $ = jQuery;

  3. var uploader,baseInfoUploader,productImgUploader,projectCoverUploader;

  4. // 图表tab切换

  5. $.each($('.chart-list li'), function (i) {

  6. $(this).on('click', function () {

  7. $(this).addClass('active').siblings('li').removeClass('active');

  8. $('.tabs-content').eq(i).show().siblings('.tabs-content').hide();

  9. });

  10. });

  11.  
  12. // 上传企业logo

  13. baseInfoUploader = WebUploader.create({

  14. auto: false,

  15. swf: '../../resources/js/plugins/webuploader-0.1.5/Uploader.swf',

  16. // 文件接收服务端。

  17. server: 'http://webuploader.duapp.com/server/fileupload.php',

  18. pick: {

  19. id: '#logoUploadBtn',

  20. innerHTML: '选择图片',

  21. multiple: true

  22. },

  23. // 只允许选择图片文件。

  24. accept: {

  25. title: 'Images',

  26. extensions: 'jpg,jpeg,png',

  27. mimeTypes: 'image/jpg,image/jpeg,image/png'

  28. },

  29. fileSingleSizeLimit: 2 * 1024 * 1024

  30. });

  31. baseInfoUploader.on( 'fileQueued', function( file ) {

  32. $img = $('#logoPriview');

  33. baseInfoUploader.makeThumb( file, function( error, src ) {

  34. if ( error ) {

  35. return;

  36. }

  37. $img.attr( 'src', src );

  38. }, 110, 110 );

  39. });

  40.  
  41. // 上传产品图片

  42. // 在弹层里面的时候,弹出show出来之后,要调用uploader.refresh()方法,否则选择文件的按钮会点击之后没反应(因为太小了,其实没点到)

  43. productImgUploader = WebUploader.create({

  44. auto: false,

  45. swf: '../../resources/js/plugins/webuploader-0.1.5/Uploader.swf',

  46. // 文件接收服务端。

  47. server: 'http://webuploader.duapp.com/server/fileupload.php',

  48. pick: {

  49. id: '#productImgUploadBtn',

  50. innerHTML: '选择图片',

  51. multiple: true

  52. },

  53. // 只允许选择图片文件。

  54. accept: {

  55. title: 'Images',

  56. extensions: 'jpg,jpeg,png',

  57. mimeTypes: 'image/jpg,image/jpeg,image/png'

  58. },

  59. fileSingleSizeLimit: 2 * 1024 * 1024

  60. });

  61. productImgUploader.on( 'fileQueued', function( file ) {

  62. $img = $('#productImgPriview');

  63. productImgUploader.makeThumb( file, function( error, src ) {

  64. if ( error ) {

  65. return;

  66. }

  67. $img.attr( 'src', src );

  68. }, 110, 110 );

  69. });

  70.  
  71. // 上传项目封面图

  72. projectCoverUploader = WebUploader.create({

  73. auto: false,

  74. swf: '../../resources/js/plugins/webuploader-0.1.5/Uploader.swf',

  75. // 文件接收服务端。

  76. server: 'http://webuploader.duapp.com/server/fileupload.php',

  77. pick: {

  78. id: '#projectCoverUploadBtn',

  79. innerHTML: '选择图片',

  80. multiple: true

  81. },

  82. // 只允许选择图片文件。

  83. accept: {

  84. title: 'Images',

  85. extensions: 'jpg,jpeg,png',

  86. mimeTypes: 'image/jpg,image/jpeg,image/png'

  87. },

  88. fileSingleSizeLimit: 2 * 1024 * 1024

  89. });

  90. projectCoverUploader.on( 'fileQueued', function( file ) {

  91. $img = $('#projectCoverPriview');

  92. projectCoverUploader.makeThumb( file, function( error, src ) {

  93. if ( error ) {

  94. return;

  95. }

  96. $img.attr( 'src', src );

  97. }, 110, 110 );

  98. });

  99.  
  100.  
  101.  
  102. //诚信认证,多文件上传

  103. $wrap = $('#uploader'),

  104. // 图片容器

  105. $queue = $('<ul class="filelist"></ul>').appendTo($wrap.find('.queueList')),

  106.  
  107. $listTitle = $wrap.find('.list-title');

  108. // 状态栏,包括进度和控制按钮

  109. $statusBar = $wrap.find('.statusBar'),

  110.  
  111. // 文件总体选择信息。

  112. $info = $statusBar.find('.info'),

  113.  
  114. // 上传按钮

  115. $upload = $('.upload-img').find('.uploadBtn'),

  116.  
  117. // 总体进度条

  118. $progress = $statusBar.find('.progress').hide(),

  119.  
  120. // 添加的文件数量

  121. fileCount = 0,

  122.  
  123. // 添加的文件总大小

  124. fileSize = 0,

  125.  
  126. // 优化retina, 在retina下这个值是2

  127. ratio = window.devicePixelRatio || 1,

  128.  
  129. // 缩略图大小

  130. thumbnailWidth = 80 * ratio,

  131. thumbnailHeight = 80 * ratio,

  132.  
  133. // 可能有pedding, ready, uploading, confirm, done.

  134. state = 'pedding',

  135.  
  136. // 所有文件的进度信息,key为file id

  137. percentages = {},

  138.  
  139. supportTransition = (function () {

  140. var s = document.createElement('p').style,

  141. r = 'transition' in s ||

  142. 'WebkitTransition' in s ||

  143. 'MozTransition' in s ||

  144. 'msTransition' in s ||

  145. 'OTransition' in s;

  146. s = null;

  147. return r;

  148. })(),

  149.  
  150. // if ( !WebUploader.Uploader.support() ) {

  151. // alert( 'Web Uploader 不支持您的浏览器!如果你使用的是IE浏览器,请尝试升级 flash 播放器');

  152. // throw new Error( 'WebUploader does not support the browser you are using.' );

  153. // }

  154.  
  155. // 实例化

  156. uploader = WebUploader.create({

  157. pick: {

  158. id: '#filePicker',

  159. innerHTML: '选择图片',

  160. multiple: true

  161. },

  162. accept: {

  163. title: 'Images',

  164. extensions: 'jpg,jpeg,png',

  165. mimeTypes: 'image/jpg,image/jpeg,image/png'

  166. },

  167.  
  168. // swf文件路径

  169. swf: '../../resources/js/plugins/webuploader-0.1.5/Uploader.swf',

  170.  
  171. disableGlobalDnd: true,

  172.  
  173. chunked: true,

  174. // server: 'http://webuploader.duapp.com/server/fileupload.php',

  175. server: 'http://2betop.net/fileupload.php',

  176. fileNumLimit: 300,

  177. fileSizeLimit: 20 * 1024 * 1024, // 200 M

  178. fileSingleSizeLimit: 2 * 1024 * 1024 // 50 M

  179. });

  180.  
  181. // 当有文件添加进来时执行,负责view的创建

  182. function addFile(file) {

  183. var $li = $('<li id="' + file.id + '">' +

  184. '<p class="imgWrap"></p>' +

  185. '<p class="progress"><span></span></p>' +

  186. '<p title=' + file.name + ' class="title ellipsis">' + file.name + '</p>' +

  187. '</li>'),

  188.  
  189. $btns = $('<div class="file-panel">' +

  190. '<span class="cancel"></span>'

  191. ).appendTo($li),

  192. // '<span class="rotateRight">向右旋转</span>' +

  193. // '<span class="rotateLeft">向左旋转</span></div>').appendTo( $li ),

  194. $prgress = $li.find('p.progress span'),

  195. $wrap = $li.find('p.imgWrap'),

  196. $info = $('<p class="error"></p>'),

  197.  
  198. showError = function (code) {

  199. switch (code) {

  200. case 'exceed_size':

  201. text = '文件大小超出';

  202. break;

  203.  
  204. case 'interrupt':

  205. text = '上传暂停';

  206. break;

  207.  
  208. default:

  209. text = '上传失败';

  210. break;

  211. }

  212.  
  213. $info.text(text).appendTo($li);

  214. };

  215.  
  216. if (file.getStatus() === 'invalid') {

  217. showError(file.statusText);

  218. } else {

  219. // @todo lazyload

  220. $wrap.text('预览中');

  221. uploader.makeThumb(file, function (error, src) {

  222. if (error) {

  223. $wrap.text('不能预览');

  224. return;

  225. }

  226.  
  227. var img = $('<img src="' + src + '">');

  228. $wrap.empty().append(img);

  229. }, thumbnailWidth, thumbnailHeight);

  230.  
  231. percentages[file.id] = [file.size, 0];

  232. file.rotation = 0;

  233. }

  234.  
  235. file.on('statuschange', function (cur, prev) {

  236. if (prev === 'progress') {

  237. $prgress.hide().width(0);

  238. } else if (prev === 'queued') {

  239. // $li.off( 'mouseenter mouseleave' );

  240. $btns.remove();

  241. }

  242.  
  243. // 成功

  244. if (cur === 'error' || cur === 'invalid') {

  245. console.log(file.statusText);

  246. showError(file.statusText);

  247. percentages[file.id][1] = 1;

  248. } else if (cur === 'interrupt') {

  249. showError('interrupt');

  250. } else if (cur === 'queued') {

  251. percentages[file.id][1] = 0;

  252. } else if (cur === 'progress') {

  253. $info.remove();

  254. $prgress.css('display', 'block');

  255. } else if (cur === 'complete') {

  256. $li.append('<p class="success">上传成功</p>');

  257. }

  258.  
  259. $li.removeClass('state-' + prev).addClass('state-' + cur);

  260. });

  261.  
  262.  
  263. $btns.on('click', 'span', function () {

  264. var index = $(this).index();

  265. switch (index) {

  266. case 0:

  267. uploader.removeFile(file);

  268. return;

  269. }

  270.  
  271. });

  272.  
  273. $li.appendTo($queue);

  274. }

  275.  
  276. // 负责view的销毁

  277. function removeFile(file) {

  278. var $li = $('#' + file.id);

  279.  
  280. delete percentages[file.id];

  281. updateTotalProgress();

  282. $li.off().find('.file-panel').off().end().remove();

  283. }

  284.  
  285. function updateTotalProgress() {

  286. var loaded = 0,

  287. total = 0,

  288. spans = $progress.children(),

  289. percent;

  290.  
  291. $.each(percentages, function (k, v) {

  292. total += v[0];

  293. loaded += v[0] * v[1];

  294. });

  295.  
  296. percent = total ? loaded / total : 0;

  297.  
  298. spans.eq(0).text(Math.round(percent * 100) + '%');

  299. spans.eq(1).css('width', Math.round(percent * 100) + '%');

  300. updateStatus();

  301. }

  302.  
  303. function updateStatus() {

  304. var text = '', stats;

  305.  
  306. if (state === 'ready') {

  307. text = '选中' + fileCount + '张图片,共' +

  308. WebUploader.formatSize(fileSize) + '。';

  309. } else if (state === 'confirm') {

  310. stats = uploader.getStats();

  311. if (stats.uploadFailNum) {

  312. text = '已成功上传' + stats.successNum + '张图片,' +

  313. stats.uploadFailNum + '张图片上传失败,<a class="retry" style="color: #de4751;" href="#">重新上传</a>失败图片'

  314. }

  315.  
  316. } else {

  317. stats = uploader.getStats();

  318. text = '共' + fileCount + '张(' +

  319. WebUploader.formatSize(fileSize) +

  320. '),已上传' + stats.successNum + '张';

  321.  
  322. if (stats.uploadFailNum) {

  323. text += ',失败' + stats.uploadFailNum + '张';

  324. }

  325. }

  326.  
  327. $info.html(text);

  328. }

  329.  
  330. function setState(val) {

  331. var file, stats;

  332.  
  333. if (val === state) {

  334. return;

  335. }

  336.  
  337. $upload.removeClass('state-' + state);

  338. $upload.addClass('state-' + val);

  339. state = val;

  340.  
  341. switch (state) {

  342. case 'pedding':

  343. // $placeHolder.removeClass( 'element-invisible' );

  344. $queue.parent().removeClass('filled');

  345. $queue.hide();

  346. $statusBar.addClass('element-invisible');

  347. uploader.refresh();

  348. break;

  349.  
  350. case 'ready':

  351. // $placeHolder.addClass( 'element-invisible' );

  352. // $( '#filePicker2' ).removeClass( 'element-invisible');

  353. $wrap.show();

  354. $upload.removeClass('disabled');

  355. $queue.parent().addClass('filled');

  356. $queue.show();

  357. $statusBar.removeClass('element-invisible');

  358. uploader.refresh();

  359. break;

  360.  
  361. case 'uploading':

  362. // $( '#filePicker2' ).addClass( 'element-invisible' );

  363. $progress.show();

  364. $upload.text('暂停上传');

  365. break;

  366.  
  367. case 'paused':

  368. $progress.show();

  369. $upload.text('继续上传');

  370. break;

  371.  
  372. case 'confirm':

  373. $progress.hide();

  374. $upload.text('开始上传').addClass('disabled');

  375.  
  376. stats = uploader.getStats();

  377. if (stats.successNum && !stats.uploadFailNum) {

  378. setState('finish');

  379. return;

  380. }

  381. break;

  382. case 'finish':

  383. stats = uploader.getStats();

  384. if (stats.successNum) {

  385. alert('上传成功');

  386. } else {

  387. // 没有成功的图片,重设

  388. state = 'done';

  389. location.reload();

  390. }

  391. break;

  392. }

  393.  
  394. updateStatus();

  395. }

  396.  
  397. uploader.onUploadProgress = function (file, percentage) {

  398. var $li = $('#' + file.id),

  399. $percent = $li.find('.progress span');

  400.  
  401. $percent.css('width', percentage * 100 + '%');

  402. percentages[file.id][1] = percentage;

  403. updateTotalProgress();

  404. };

  405.  
  406. uploader.onFileQueued = function (file) {

  407. fileCount++;

  408. fileSize += file.size;

  409.  
  410. if (fileCount === 1) {

  411. // $placeHolder.addClass( 'element-invisible' );

  412. $statusBar.show();

  413. }

  414.  
  415. addFile(file);

  416. setState('ready');

  417. updateTotalProgress();

  418. };

  419.  
  420. uploader.onFileDequeued = function (file) {

  421. fileCount--;

  422. fileSize -= file.size;

  423.  
  424. if (!fileCount) {

  425. setState('pedding');

  426. }

  427.  
  428. removeFile(file);

  429. updateTotalProgress();

  430.  
  431. };

  432.  
  433. uploader.on('all', function (type) {

  434. var stats;

  435. switch (type) {

  436. case 'uploadFinished':

  437. setState('confirm');

  438. break;

  439.  
  440. case 'startUpload':

  441. setState('uploading');

  442. break;

  443.  
  444. case 'stopUpload':

  445. setState('paused');

  446. break;

  447.  
  448. }

  449. });

  450.  
  451. uploader.onError = function (code) {

  452. alert('Eroor: ' + code);

  453. };

  454.  
  455. $upload.on('click', function () {

  456. if ($(this).hasClass('disabled')) {

  457. return false;

  458. }

  459.  
  460. if (state === 'ready') {

  461. uploader.upload();

  462. } else if (state === 'paused') {

  463. uploader.upload();

  464. } else if (state === 'uploading') {

  465. uploader.stop();

  466. }

  467. });

  468.  
  469. $info.on('click', '.retry', function () {

  470. uploader.retry();

  471. });

  472.  
  473. $info.on('click', '.ignore', function () {

  474. alert('todo');

  475. });

  476.  
  477. $upload.addClass('state-' + state);

  478. updateTotalProgress();

  479. });

附图:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百度WebUploader是一个基于HTML5的文件上传组件,它支持多文件、分片上传、断点续传等功能。要实现图片批量上传,可以结合PHP来完成。 首先,引入WebUploader插件及其样式文件。然后在HTML中创建一个容器,用来展示上传按钮和上传结果的反馈信息。 接下来,在PHP文件中设置图片上传的相关配置。首先要指定上传的文件类型为图片类型,通过设置`accept`属性为`image/*`实现。 在PHP文件中,使用`$_FILES`来获取上传的文件信息。通过遍历`$_FILES`数组,可以获取到每个文件的相关属性,如文件名、大小、临时路径等。 然后,可以使用PHP的文件处理函数来对每个上传的文件进行处理,比如判断文件大小是否在限定范围内,判断文件类型是否为图片等。可以使用`getimagesize()`函数来判断文件是否为图片。 对于合法的图片文件,可以使用`move_uploaded_file()`函数将其从临时目录移动到指定的目录中,同时生成新的文件名,以防止文件名重复。可以使用`uniqid()`函数生成一个唯一的文件名,拼接上原文件的后缀名。 在处理完所有上传的文件后,可以将结果返回给前端页面。可以通过`json_encode()`函数将结果以JSON格式返回,其中包括上传成功的文件名和上传失败的文件列表。 最后,在前端页面的JavaScript代码中,使用百度WebUploader的API方法来实现上传功能。通过监听`fileQueued`事件,将每次选择的文件添加到队列中。可以通过设定`auto=true`来将文件自动上传。 在监听到`uploadSuccess`事件时,可以获取到上传成功的文件名,可以使用JavaScript动态生成一个缩略图,并显示在页面上。 总结起来,实现百度WebUploader图片批量上传PHP,主要包括:引入WebUploader插件和样式文件、在PHP中设置文件上传的配置、通过`$_FILES`获取上传文件的信息、判断上传的文件是否为图片并处理、返回上传结果给前端页面、在前端页面通过监听事件实现上传功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值