TP5用webuploader实现图片上传

举报
黄啊码 发表于 2022/06/29 00:21:26 2022/06/29
【摘要】 PHP模板解析路径问题 首先,配置文件添加代码 位置:application/config.php return [ 'admin' => '/static/admin',], 其次,php中读取配置文件 $admin = config('admin');或者$admin = config("view_replace...

PHP模板解析路径问题

首先,配置文件添加代码
位置:application/config.php


  
  1. return [
  2. 'admin' => '/static/admin',
  3. ],

其次,php中读取配置文件


  
  1. $admin = config('admin');
  2. 或者
  3. $admin = config("view_replace_str.__ADMIN__"); //重点推荐
  4. <script src="$admin/plugins/webuploader-0.1.5/webuploader.min.js"></script>

整合TP5

1、引入CSS文件


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

2、初始化


  
  1. $(document).ready(function(){
  2. // Bootstrap fileinput插件初始化
  3. $('#file-zh').fileinput({
  4. language: 'zh',
  5. uploadUrl: '#',
  6. allowedFileExtensions: ['jpg', 'png', 'gif'],
  7. });
  8. // 初始化Web Uploader
  9. uploader = WebUploader.create({
  10. pick: {
  11. id: '#filePicker-2',
  12. label: '点击选择图片'
  13. },
  14. formData: {
  15. uid: 123
  16. },
  17. dnd: '#dndArea',
  18. paste: '#uploader',
  19. swf: '__ADMIN__/plugins/webuploader-0.1.5/Uploader.swf',
  20. chunked: false,
  21. chunkSize: 512 * 1024,
  22. server: 'http://webuploader.duapp.com/server/fileupload.php',
  23. // runtimeOrder: 'flash',
  24. accept: {
  25. title: 'Images',
  26. extensions: 'gif,jpg,jpeg,bmp,png',
  27. mimeTypes: 'image/*'
  28. },
  29. // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
  30. disableGlobalDnd: true,
  31. fileNumLimit: 300,
  32. fileSizeLimit: 200 * 1024 * 1024, // 200 M
  33. fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
  34. });
  35. });

3、修改common.php

位置:\application\admin\common.php


  
  1. function images($fieldinfo){
  2. //字段名
  3. $field = $fieldinfo['field'];
  4. $str = <<<EOF
  5. <div class="uploader-list-container">
  6. <div class="queueList">
  7. <div id="dndArea" class="placeholder">
  8. <div id="filePicker-2"></div>
  9. <p>或将图片拖到这里,单次最多可选10张</p>
  10. </div>
  11. </div>
  12. <div class="statusBar" style="display:none;">
  13. <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div>
  14. <div class="info"></div>
  15. <div class="btns">
  16. <div id="filePicker2"></div>
  17. <div class="uploadBtn">开始上传</div>
  18. </div>
  19. </div>
  20. </div>
  21. <script src="$admin/plugins/webuploader-0.1.5/webuploader.min.js"></script>
  22. EOF;
  23. return $str;
  24. }

4、控制器


  
  1. //多图片或多文件上传
  2. public function upload_images(){
  3. $file = request()->file('file');
  4. $info = $file->move(ROOT_PATH . 'public/uploads');
  5. if($info) {
  6. return json_encode($info->getSaveName());
  7. }
  8. }

5、上传限制(图片个数和类型)

首先,图片个数

$maxnumber = $setting['maxnumber'];

 

有两个地方需要设置


  
  1. <div class="queueList">
  2. <div id="dndArea" class="placeholder">
  3. <div id="filePicker-2"></div>
  4. <p>或将图片拖到这里,单次最多可选 $maxnumber 张</p>
  5. </div>
  6. </div>
  7. // 实例化
  8. uploader = WebUploader.create({
  9. // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
  10. disableGlobalDnd: true,
  11. fileNumLimit: $maxnumber,
  12. fileSizeLimit: 200 * 1024 * 1024, // 200 M
  13. fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
  14. });
  15. //上传成功返回文件名
  16. uploader.on('uploadSuccess', function(file,response){
  17. alert(response);
  18. });
  19. // 上传错误提示
  20. uploader.onError = function( code ) {
  21. if(code == "Q_EXCEED_NUM_LIMIT") {
  22. layer.alert("只能上传 $maxnumber 张图片");
  23. } else if(code == "F_DUPLICATE") {
  24. layer.alert("重复上传");
  25. } else {
  26. layer.alert("错误代码:" + code);
  27. }
  28. };

其次,图片类型


  
  1. $allowext = $setting['allowext'];
  2. // 实例化
  3. uploader = WebUploader.create({
  4. pick: {
  5. id: '#filePicker-2',
  6. label: '点击选择图片'
  7. },
  8. formData: {
  9. uid: 123
  10. },
  11. dnd: '#dndArea',
  12. paste: '#uploader',
  13. swf: '$admin/plugins/webuploader-0.1.5/Uploader.swf',
  14. chunked: false,
  15. chunkSize: 512 * 1024,
  16. server: '$url',
  17. // runtimeOrder: 'flash',
  18. accept: {
  19. title: 'Images',
  20. extensions: '$allowext',
  21. mimeTypes: 'image/*'
  22. },
  23. // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
  24. disableGlobalDnd: true,
  25. fileNumLimit: $maxnumber,
  26. fileSizeLimit: 200 * 1024 * 1024, // 200 M
  27. fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
  28. });

6、保存到数据库

思路:异步发送到控制器,控制器上传成功,则返回文件名;前端添加隐藏表单,把这个文件名作为属性隐藏起来;统一提交到数据库保存


  
  1. <input type="hidden" id="info_$field" name="info[$field]" class="input-large form-control">
  2. //上传成功返回文件名
  3. uploader.on('uploadSuccess', function(file,response){
  4. var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ',';
  5. $('#info_$field').val( images_value + response);
  6. });

完善WebUploader相关功能

(一)图片上传成功显示删除按钮

思路:修改common.php


  
  1. file.on('statuschange', function( cur, prev ) {
  2. if ( prev === 'progress' ) {
  3. prgress.hide().width(0);
  4. } else if ( prev === 'queued' ) {
  5. //li.off( 'mouseenter mouseleave' ); //解除事件监听
  6. //btns.remove();
  7. li.find( 'span.rotateLeft' ).remove(); //移除左旋转按钮
  8. li.find( 'span.rotateRight' ).remove(); //移除右旋转按钮
  9. }
  10. });

(二)执行删除操作

思路:把上传成功的图片路径赋值给图片

1、修改common.php


  
  1. $delete_url = url('delete_file');
  2. var img_src = li.attr('studyfox_img');
  3. // 负责view的销毁
  4. function removeFile( file ) {
  5. var li = $('#'+file.id);
  6. var img_src = li.attr('studyfox_img');
  7. delete percentages[ file.id ];
  8. updateTotalProgress();
  9. li.off().find('.file-panel').off().end().remove();
  10. //后台删除图片
  11. $.ajax({
  12. url: '$delete_url',
  13. type: 'POST',
  14. data: {'img': img_src},
  15. success: function(result, textStatus){
  16. alert(textStatus);
  17. alert(result);
  18. }
  19. });
  20. }

上传成功返回文件名


  
  1. uploader.on('uploadSuccess', function(file,response){
  2. var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ',';
  3. $('#info_$field').val( images_value + response);
  4. //在当前图片LI里添加图片地址
  5. $('#'+file.id).attr('studyfox_img',response);
  6. });

2、把图片路径发给控制器处理


  
  1. //删除文件或图片
  2. public function delete_file(){
  3. $delete_url = input('img');
  4. try {
  5. unlink(ROOT_PATH . 'public/uploads/' . $delete_url); //删除成功返回1
  6. } catch (Exception $e) { }
  7. }

完整代码


  
  1. function images($fieldinfo){
  2. //字段名
  3. $field = $fieldinfo['field'];
  4. $url = url('upload_images');
  5. $delete_url = url('delete_file');
  6. //反序列化设置项
  7. $setting = unserialize($fieldinfo['setting']);
  8. $allowext = $setting['allowext'];
  9. $maxnumber = $setting['maxnumber'];
  10. $str = <<<EOF
  11. <input type="hidden" id="info_$field" name="info[$field]" class="input-large form-control">
  12. <div class="uploader-list-container">
  13. <div class="queueList">
  14. <div id="dndArea" class="placeholder">
  15. <div id="filePicker-2"></div>
  16. <p>或将图片拖到这里,单次最多可选 $maxnumber 张</p>
  17. </div>
  18. </div>
  19. <div class="statusBar" style="display:none;">
  20. <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div>
  21. <div class="info"></div>
  22. <div class="btns">
  23. <div id="filePicker2"></div>
  24. <div class="uploadBtn">开始上传</div>
  25. </div>
  26. </div>
  27. </div>
  28. <script src="__ADMIN__/plugins/webuploader-0.1.5/webuploader.min.js"></script>
  29. <script type="text/javascript" >
  30. (function( $ ){
  31. // 当domReady的时候开始初始化
  32. $(function() {
  33. var wrap = $('.uploader-list-container'),
  34. // 图片容器
  35. queue = $( '<ul class="filelist"></ul>' )
  36. .appendTo( wrap.find( '.queueList' ) ),
  37. // 状态栏,包括进度和控制按钮
  38. statusBar = wrap.find( '.statusBar' ),
  39. // 文件总体选择信息。
  40. info = statusBar.find( '.info' ),
  41. // 上传按钮
  42. upload = wrap.find( '.uploadBtn' ),
  43. // 没选择文件之前的内容。
  44. placeHolder = wrap.find( '.placeholder' ),
  45. progress = statusBar.find( '.progress' ).hide(),
  46. // 添加的文件数量
  47. fileCount = 0,
  48. // 添加的文件总大小
  49. fileSize = 0,
  50. // 优化retina, 在retina下这个值是2
  51. ratio = window.devicePixelRatio || 1,
  52. // 缩略图大小
  53. thumbnailWidth = 110 * ratio,
  54. thumbnailHeight = 110 * ratio,
  55. // 可能有pedding, ready, uploading, confirm, done.
  56. state = 'pedding',
  57. // 所有文件的进度信息,key为file id
  58. percentages = {},
  59. // 判断浏览器是否支持图片的base64
  60. isSupportBase64 = ( function() {
  61. var data = new Image();
  62. var support = true;
  63. data.onload = data.onerror = function() {
  64. if( this.width != 1 || this.height != 1 ) {
  65. support = false;
  66. }
  67. }
  68. data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  69. return support;
  70. } )(),
  71. // 检测是否已经安装flash,检测flash的版本
  72. flashVersion = ( function() {
  73. var version;
  74. try {
  75. version = navigator.plugins[ 'Shockwave Flash' ];
  76. version = version.description;
  77. } catch ( ex ) {
  78. try {
  79. version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
  80. .GetVariable('version');
  81. } catch ( ex2 ) {
  82. version = '0.0';
  83. }
  84. }
  85. version = version.match( /\d+/g );
  86. return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 );
  87. } )(),
  88. supportTransition = (function(){
  89. var s = document.createElement('p').style,
  90. r = 'transition' in s ||
  91. 'WebkitTransition' in s ||
  92. 'MozTransition' in s ||
  93. 'msTransition' in s ||
  94. 'OTransition' in s;
  95. s = null;
  96. return r;
  97. })(),
  98. // WebUploader实例
  99. uploader;
  100. // 实例化
  101. uploader = WebUploader.create({
  102. pick: {
  103. id: '#filePicker-2',
  104. label: '点击选择图片'
  105. },
  106. formData: {
  107. uid: 123
  108. },
  109. dnd: '#dndArea',
  110. paste: '#uploader',
  111. swf: '__ADMIN__/plugins/webuploader-0.1.5/Uploader.swf',
  112. chunked: false,
  113. chunkSize: 512 * 1024,
  114. server: '$url',
  115. // runtimeOrder: 'flash',
  116. accept: {
  117. title: 'Images',
  118. extensions: '$allowext',
  119. mimeTypes: 'image/*'
  120. },
  121. // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
  122. disableGlobalDnd: true,
  123. fileNumLimit: $maxnumber,
  124. fileSizeLimit: 200 * 1024 * 1024, // 200 M
  125. fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
  126. });
  127. // 拖拽时不接受 js, txt 文件。
  128. uploader.on( 'dndAccept', function( items ) {
  129. var denied = false,
  130. len = items.length,
  131. i = 0,
  132. // 修改js类型
  133. unAllowed = 'text/plain;application/javascript ';
  134. for ( ; i < len; i++ ) {
  135. // 如果在列表里面
  136. if ( ~unAllowed.indexOf( items[ i ].type ) ) {
  137. denied = true;
  138. break;
  139. }
  140. }
  141. return !denied;
  142. });
  143. uploader.on('dialogOpen', function() {
  144. console.log('here');
  145. });
  146. // uploader.on('filesQueued', function() {
  147. // uploader.sort(function( a, b ) {
  148. // if ( a.name < b.name )
  149. // return -1;
  150. // if ( a.name > b.name )
  151. // return 1;
  152. // return 0;
  153. // });
  154. // });
  155. // 添加“添加文件”的按钮,
  156. uploader.addButton({
  157. id: '#filePicker2',
  158. label: '继续添加'
  159. });
  160. uploader.on('ready', function() {
  161. window.uploader = uploader;
  162. });
  163. // 当有文件添加进来时执行,负责view的创建
  164. function addFile( file ) {
  165. var li = $( '<li id="' + file.id + '">' +
  166. '<p class="title">' + file.name + '</p>' +
  167. '<p class="imgWrap"></p>'+
  168. '<p class="progress"><span></span></p>' +
  169. '</li>' ),
  170. btns = $('<div class="file-panel">' +
  171. '<span class="cancel">删除</span>' +
  172. '<span class="rotateRight">向右旋转</span>' +
  173. '<span class="rotateLeft">向左旋转</span></div>').appendTo( li ),
  174. prgress = li.find('p.progress span'),
  175. wrap = li.find( 'p.imgWrap' ),
  176. info = $('<p class="error"></p>'),
  177. showError = function( code ) {
  178. switch( code ) {
  179. case 'exceed_size':
  180. text = '文件大小超出';
  181. break;
  182. case 'interrupt':
  183. text = '上传暂停';
  184. break;
  185. default:
  186. text = '上传失败,请重试';
  187. break;
  188. }
  189. info.text( text ).appendTo( li );
  190. };
  191. if ( file.getStatus() === 'invalid' ) {
  192. showError( file.statusText );
  193. } else {
  194. // @todo lazyload
  195. wrap.text( '预览中' );
  196. uploader.makeThumb( file, function( error, src ) {
  197. var img;
  198. if ( error ) {
  199. wrap.text( '不能预览' );
  200. return;
  201. }
  202. if( isSupportBase64 ) {
  203. img = $('<img src="'+src+'">');
  204. wrap.empty().append( img );
  205. } else {
  206. $.ajax('../server/preview.php', {
  207. method: 'POST',
  208. data: src,
  209. dataType:'json'
  210. }).done(function( response ) {
  211. if (response.result) {
  212. img = $('<img src="'+response.result+'">');
  213. wrap.empty().append( img );
  214. } else {
  215. wrap.text("预览出错");
  216. }
  217. });
  218. }
  219. }, thumbnailWidth, thumbnailHeight );
  220. percentages[ file.id ] = [ file.size, 0 ];
  221. file.rotation = 0;
  222. }
  223. file.on('statuschange', function( cur, prev ) {
  224. if ( prev === 'progress' ) {
  225. prgress.hide().width(0);
  226. } else if ( prev === 'queued' ) {
  227. //li.off( 'mouseenter mouseleave' ); //解除事件监听
  228. //btns.remove();
  229. li.find( 'span.rotateLeft' ).remove(); //移除左旋转按钮
  230. li.find( 'span.rotateRight' ).remove(); //移除右旋转按钮
  231. }
  232. // 成功
  233. if ( cur === 'error' || cur === 'invalid' ) {
  234. console.log( file.statusText );
  235. showError( file.statusText );
  236. percentages[ file.id ][ 1 ] = 1;
  237. } else if ( cur === 'interrupt' ) {
  238. showError( 'interrupt' );
  239. } else if ( cur === 'queued' ) {
  240. percentages[ file.id ][ 1 ] = 0;
  241. } else if ( cur === 'progress' ) {
  242. info.remove();
  243. prgress.css('display', 'block');
  244. } else if ( cur === 'complete' ) {
  245. li.append( '<span class="success"></span>' );
  246. }
  247. li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );
  248. });
  249. li.on( 'mouseenter', function() {
  250. btns.stop().animate({height: 30});
  251. });
  252. li.on( 'mouseleave', function() {
  253. btns.stop().animate({height: 0});
  254. });
  255. btns.on( 'click', 'span', function() {
  256. var index = $(this).index(),
  257. deg;
  258. switch ( index ) {
  259. case 0:
  260. uploader.removeFile( file );
  261. return;
  262. case 1:
  263. file.rotation += 90;
  264. break;
  265. case 2:
  266. file.rotation -= 90;
  267. break;
  268. }
  269. if ( supportTransition ) {
  270. deg = 'rotate(' + file.rotation + 'deg)';
  271. wrap.css({
  272. '-webkit-transform': deg,
  273. '-mos-transform': deg,
  274. '-o-transform': deg,
  275. 'transform': deg
  276. });
  277. } else {
  278. wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
  279. // use jquery animate to rotation
  280. // $({
  281. // rotation: rotation
  282. // }).animate({
  283. // rotation: file.rotation
  284. // }, {
  285. // easing: 'linear',
  286. // step: function( now ) {
  287. // now = now * Math.PI / 180;
  288. // var cos = Math.cos( now ),
  289. // sin = Math.sin( now );
  290. // $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
  291. // }
  292. // });
  293. }
  294. });
  295. li.appendTo( queue );
  296. }
  297. // 负责view的销毁
  298. function removeFile( file ) {
  299. var li = $('#'+file.id);
  300. var img_src = li.attr('studyfox_img');
  301. delete percentages[ file.id ];
  302. updateTotalProgress();
  303. li.off().find('.file-panel').off().end().remove();
  304. //后台删除图片
  305. $.ajax({
  306. url: '$delete_url',
  307. type: 'POST',
  308. data: {'img': img_src},
  309. success: function(result, textStatus){
  310. //图片删除成功后移除文本框图片信息,三种情况 ,号位置在前 后 或没有,号
  311. var images_value = $('#info_$field').val();//隐藏文本框的值
  312. images_value = images_value.replace(img_src+',', ''); //替换,号在右边
  313. images_value = images_value.replace(','+img_src, ''); //替换,号在左边
  314. images_value = images_value.replace(img_src, ''); //直接替换
  315. //重新赋值
  316. $('#info_$field').val(images_value);
  317. },
  318. error: function(XMLHttpRequest, textStatus){
  319. layer.alert('删除失败!', {icon:2});
  320. }
  321. });
  322. }
  323. //上传成功返回文件名
  324. uploader.on('uploadSuccess', function(file,response){
  325. var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ',';
  326. $('#info_$field').val( images_value + response);
  327. //在当前图片LI里添加图片地址
  328. $('#'+file.id).attr('studyfox_img',response);
  329. });
  330. function updateTotalProgress() {
  331. var loaded = 0,
  332. total = 0,
  333. spans = progress.children(),
  334. percent;
  335. $.each( percentages, function( k, v ) {
  336. total += v[ 0 ];
  337. loaded += v[ 0 ] * v[ 1 ];
  338. } );
  339. percent = total ? loaded / total : 0;
  340. spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' );
  341. spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' );
  342. updateStatus();
  343. }
  344. function updateStatus() {
  345. var text = '', stats;
  346. if ( state === 'ready' ) {
  347. text = '选中' + fileCount + '张图片,共' +
  348. WebUploader.formatSize( fileSize ) + '。';
  349. } else if ( state === 'confirm' ) {
  350. stats = uploader.getStats();
  351. if ( stats.uploadFailNum ) {
  352. text = '已成功上传' + stats.successNum+ '张图片至服务器,'+
  353. stats.uploadFailNum + '张图片上传失败,<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'
  354. }
  355. } else {
  356. stats = uploader.getStats();
  357. text = '共' + fileCount + '张(' +
  358. WebUploader.formatSize( fileSize ) +
  359. '),已上传' + stats.successNum + '张';
  360. if ( stats.uploadFailNum ) {
  361. text += ',失败' + stats.uploadFailNum + '张';
  362. }
  363. }
  364. info.html( text );
  365. }
  366. function setState( val ) {
  367. var file, stats;
  368. if ( val === state ) {
  369. return;
  370. }
  371. upload.removeClass( 'state-' + state );
  372. upload.addClass( 'state-' + val );
  373. state = val;
  374. switch ( state ) {
  375. case 'pedding':
  376. placeHolder.removeClass( 'element-invisible' );
  377. queue.hide();
  378. statusBar.addClass( 'element-invisible' );
  379. uploader.refresh();
  380. break;
  381. case 'ready':
  382. placeHolder.addClass( 'element-invisible' );
  383. $( '#filePicker2' ).removeClass( 'element-invisible');
  384. queue.show();
  385. statusBar.removeClass('element-invisible');
  386. uploader.refresh();
  387. break;
  388. case 'uploading':
  389. $( '#filePicker2' ).addClass( 'element-invisible' );
  390. progress.show();
  391. upload.text( '暂停上传' );
  392. break;
  393. case 'paused':
  394. progress.show();
  395. upload.text( '继续上传' );
  396. break;
  397. case 'confirm':
  398. progress.hide();
  399. $( '#filePicker2' ).removeClass( 'element-invisible' );
  400. upload.text( '开始上传' );
  401. stats = uploader.getStats();
  402. if ( stats.successNum && !stats.uploadFailNum ) {
  403. setState( 'finish' );
  404. return;
  405. }
  406. break;
  407. case 'finish':
  408. stats = uploader.getStats();
  409. if ( stats.successNum ) {
  410. layer.alert( '上传成功' );
  411. } else {
  412. // 没有成功的图片,重设
  413. state = 'done';
  414. location.reload();
  415. }
  416. break;
  417. }
  418. updateStatus();
  419. }
  420. uploader.onUploadProgress = function( file, percentage ) {
  421. var li = $('#'+file.id),
  422. percent = li.find('.progress span');
  423. percent.css( 'width', percentage * 100 + '%' );
  424. percentages[ file.id ][ 1 ] = percentage;
  425. updateTotalProgress();
  426. };
  427. uploader.onFileQueued = function( file ) {
  428. fileCount++;
  429. fileSize += file.size;
  430. if ( fileCount === 1 ) {
  431. placeHolder.addClass( 'element-invisible' );
  432. statusBar.show();
  433. }
  434. addFile( file );
  435. setState( 'ready' );
  436. updateTotalProgress();
  437. };
  438. uploader.onFileDequeued = function( file ) {
  439. fileCount--;
  440. fileSize -= file.size;
  441. if ( !fileCount ) {
  442. setState( 'pedding' );
  443. }
  444. removeFile( file );
  445. updateTotalProgress();
  446. };
  447. uploader.on( 'all', function( type ) {
  448. var stats;
  449. switch( type ) {
  450. case 'uploadFinished':
  451. setState( 'confirm' );
  452. break;
  453. case 'startUpload':
  454. setState( 'uploading' );
  455. break;
  456. case 'stopUpload':
  457. setState( 'paused' );
  458. break;
  459. }
  460. });
  461. uploader.onError = function( code ) {
  462. if(code == "Q_EXCEED_NUM_LIMIT") {
  463. layer.alert("只能上传 $maxnumber 张图片");
  464. } else if(code == "F_DUPLICATE") {
  465. layer.alert("重复上传");
  466. } else {
  467. layer.alert("错误代码:" + code);
  468. }
  469. };
  470. upload.on('click', function() {
  471. if ( $(this).hasClass( 'disabled' ) ) {
  472. return false;
  473. }
  474. if ( state === 'ready' ) {
  475. uploader.upload();
  476. } else if ( state === 'paused' ) {
  477. uploader.upload();
  478. } else if ( state === 'uploading' ) {
  479. uploader.stop();
  480. }
  481. });
  482. info.on( 'click', '.retry', function() {
  483. uploader.retry();
  484. } );
  485. info.on( 'click', '.ignore', function() {
  486. alert( 'todo' );
  487. } );
  488. upload.addClass( 'state-' + state );
  489. updateTotalProgress();
  490. });
  491. })( jQuery );
  492. </script>
  493. EOF;
  494. return $str;
  495. }

文章来源: markwcm.blog.csdn.net,作者:黄啊码,版权归原作者所有,如需转载,请联系作者。

原文链接:markwcm.blog.csdn.net/article/details/106382112

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。