💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
[TOC] > 知识点 > 百度上传控件(WebUploader) 插件位置:X:\WWW\tp5\public\static\admin\plugins\webuploader-0.1.5 ## PHP模板解析路径问题 首先,配置文件添加代码 位置:application/config.php ~~~ return [ 'admin' => '/static/admin', ], ~~~ 其次,php中读取配置文件 ~~~ $admin = config('admin'); 或者 $admin = config("view_replace_str.__ADMIN__"); //重点推荐 <script src="$admin/plugins/webuploader-0.1.5/webuploader.min.js"></script> ~~~ ## 整合TP5 ### 1、引入CSS文件 ~~~ <link href="__ADMIN__/plugins/webuploader-0.1.5/webuploader.css" rel="stylesheet"> <script src="__ADMIN__/plugins/webuploader-0.1.5/webuploader.min.js"></script> ~~~ ### 2、初始化 ~~~ $(document).ready(function(){ // Bootstrap fileinput插件初始化 $('#file-zh').fileinput({ language: 'zh', uploadUrl: '#', allowedFileExtensions: ['jpg', 'png', 'gif'], }); // 初始化Web Uploader uploader = WebUploader.create({ pick: { id: '#filePicker-2', label: '点击选择图片' }, formData: { uid: 123 }, dnd: '#dndArea', paste: '#uploader', swf: '__ADMIN__/plugins/webuploader-0.1.5/Uploader.swf', chunked: false, chunkSize: 512 * 1024, server: 'http://webuploader.duapp.com/server/fileupload.php', // runtimeOrder: 'flash', accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }, // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。 disableGlobalDnd: true, fileNumLimit: 300, fileSizeLimit: 200 * 1024 * 1024, // 200 M fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M }); }); ~~~ ### 3、修改common.php 位置:\application\admin\common.php ~~~ function images($fieldinfo){ //字段名 $field = $fieldinfo['field']; $str = <<<EOF <div class="uploader-list-container"> <div class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker-2"></div> <p>或将图片拖到这里,单次最多可选10张</p> </div> </div> <div class="statusBar" style="display:none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div> <div class="info"></div> <div class="btns"> <div id="filePicker2"></div> <div class="uploadBtn">开始上传</div> </div> </div> </div> <script src="$admin/plugins/webuploader-0.1.5/webuploader.min.js"></script> EOF; return $str; } ~~~ ### 4、控制器 ~~~ //多图片或多文件上传 public function upload_images(){ $file = request()->file('file'); $info = $file->move(ROOT_PATH . 'public/uploads'); if($info) { return json_encode($info->getSaveName()); } } ~~~ ### 5、上传限制(图片个数和类型) >首先,图片个数 ~~~ $maxnumber = $setting['maxnumber']; ~~~ 有两个地方需要设置 ~~~ <div class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker-2"></div> <p>或将图片拖到这里,单次最多可选 $maxnumber 张</p> </div> </div> // 实例化 uploader = WebUploader.create({ // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。 disableGlobalDnd: true, fileNumLimit: $maxnumber, fileSizeLimit: 200 * 1024 * 1024, // 200 M fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M }); //上传成功返回文件名 uploader.on('uploadSuccess', function(file,response){ alert(response); }); // 上传错误提示 uploader.onError = function( code ) { if(code == "Q_EXCEED_NUM_LIMIT") { layer.alert("只能上传 $maxnumber 张图片"); } else if(code == "F_DUPLICATE") { layer.alert("重复上传"); } else { layer.alert("错误代码:" + code); } }; ~~~ >其次,图片类型 ~~~ $allowext = $setting['allowext']; // 实例化 uploader = WebUploader.create({ pick: { id: '#filePicker-2', label: '点击选择图片' }, formData: { uid: 123 }, dnd: '#dndArea', paste: '#uploader', swf: '$admin/plugins/webuploader-0.1.5/Uploader.swf', chunked: false, chunkSize: 512 * 1024, server: '$url', // runtimeOrder: 'flash', accept: { title: 'Images', extensions: '$allowext', mimeTypes: 'image/*' }, // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。 disableGlobalDnd: true, fileNumLimit: $maxnumber, fileSizeLimit: 200 * 1024 * 1024, // 200 M fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M }); ~~~ ### 6、保存到数据库 思路:异步发送到控制器,控制器上传成功,则返回文件名;前端添加隐藏表单,把这个文件名作为属性隐藏起来;统一提交到数据库保存 ~~~ <input type="hidden" id="info_$field" name="info[$field]" class="input-large form-control"> //上传成功返回文件名 uploader.on('uploadSuccess', function(file,response){ var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ','; $('#info_$field').val( images_value + response); }); ~~~ ## 完善WebUploader相关功能 ### (一)图片上传成功显示删除按钮 思路:修改common.php ~~~ file.on('statuschange', function( cur, prev ) { if ( prev === 'progress' ) { prgress.hide().width(0); } else if ( prev === 'queued' ) { //li.off( 'mouseenter mouseleave' ); //解除事件监听 //btns.remove(); li.find( 'span.rotateLeft' ).remove(); //移除左旋转按钮 li.find( 'span.rotateRight' ).remove(); //移除右旋转按钮 } }); ~~~ ### (二)执行删除操作 思路:把上传成功的图片路径赋值给图片 #### 1、修改common.php ~~~ $delete_url = url('delete_file'); var img_src = li.attr('studyfox_img'); // 负责view的销毁 function removeFile( file ) { var li = $('#'+file.id); var img_src = li.attr('studyfox_img'); delete percentages[ file.id ]; updateTotalProgress(); li.off().find('.file-panel').off().end().remove(); //后台删除图片 $.ajax({ url: '$delete_url', type: 'POST', data: {'img': img_src}, success: function(result, textStatus){ alert(textStatus); alert(result); } }); } ~~~ 上传成功返回文件名 ~~~ uploader.on('uploadSuccess', function(file,response){ var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ','; $('#info_$field').val( images_value + response); //在当前图片LI里添加图片地址 $('#'+file.id).attr('studyfox_img',response); }); ~~~ #### 2、把图片路径发给控制器处理 ~~~ //删除文件或图片 public function delete_file(){ $delete_url = input('img'); try { unlink(ROOT_PATH . 'public/uploads/' . $delete_url); //删除成功返回1 } catch (Exception $e) { } } ~~~ ## 完整代码 ~~~ function images($fieldinfo){ //字段名 $field = $fieldinfo['field']; $url = url('upload_images'); $delete_url = url('delete_file'); //反序列化设置项 $setting = unserialize($fieldinfo['setting']); $allowext = $setting['allowext']; $maxnumber = $setting['maxnumber']; $str = <<<EOF <input type="hidden" id="info_$field" name="info[$field]" class="input-large form-control"> <div class="uploader-list-container"> <div class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker-2"></div> <p>或将图片拖到这里,单次最多可选 $maxnumber 张</p> </div> </div> <div class="statusBar" style="display:none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div> <div class="info"></div> <div class="btns"> <div id="filePicker2"></div> <div class="uploadBtn">开始上传</div> </div> </div> </div> <script src="__ADMIN__/plugins/webuploader-0.1.5/webuploader.min.js"></script> <script type="text/javascript" > (function( $ ){ // 当domReady的时候开始初始化 $(function() { var wrap = $('.uploader-list-container'), // 图片容器 queue = $( '<ul class="filelist"></ul>' ) .appendTo( wrap.find( '.queueList' ) ), // 状态栏,包括进度和控制按钮 statusBar = wrap.find( '.statusBar' ), // 文件总体选择信息。 info = statusBar.find( '.info' ), // 上传按钮 upload = wrap.find( '.uploadBtn' ), // 没选择文件之前的内容。 placeHolder = wrap.find( '.placeholder' ), progress = statusBar.find( '.progress' ).hide(), // 添加的文件数量 fileCount = 0, // 添加的文件总大小 fileSize = 0, // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio, // 可能有pedding, ready, uploading, confirm, done. state = 'pedding', // 所有文件的进度信息,key为file id percentages = {}, // 判断浏览器是否支持图片的base64 isSupportBase64 = ( function() { var data = new Image(); var support = true; data.onload = data.onerror = function() { if( this.width != 1 || this.height != 1 ) { support = false; } } data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; return support; } )(), // 检测是否已经安装flash,检测flash的版本 flashVersion = ( function() { var version; try { version = navigator.plugins[ 'Shockwave Flash' ]; version = version.description; } catch ( ex ) { try { version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash') .GetVariable('version'); } catch ( ex2 ) { version = '0.0'; } } version = version.match( /\d+/g ); return parseFloat( version[ 0 ] + '.' + version[ 1 ], 10 ); } )(), supportTransition = (function(){ var s = document.createElement('p').style, r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; s = null; return r; })(), // WebUploader实例 uploader; // 实例化 uploader = WebUploader.create({ pick: { id: '#filePicker-2', label: '点击选择图片' }, formData: { uid: 123 }, dnd: '#dndArea', paste: '#uploader', swf: '__ADMIN__/plugins/webuploader-0.1.5/Uploader.swf', chunked: false, chunkSize: 512 * 1024, server: '$url', // runtimeOrder: 'flash', accept: { title: 'Images', extensions: '$allowext', mimeTypes: 'image/*' }, // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。 disableGlobalDnd: true, fileNumLimit: $maxnumber, fileSizeLimit: 200 * 1024 * 1024, // 200 M fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M }); // 拖拽时不接受 js, txt 文件。 uploader.on( 'dndAccept', function( items ) { var denied = false, len = items.length, i = 0, // 修改js类型 unAllowed = 'text/plain;application/javascript '; for ( ; i < len; i++ ) { // 如果在列表里面 if ( ~unAllowed.indexOf( items[ i ].type ) ) { denied = true; break; } } return !denied; }); uploader.on('dialogOpen', function() { console.log('here'); }); // uploader.on('filesQueued', function() { // uploader.sort(function( a, b ) { // if ( a.name < b.name ) // return -1; // if ( a.name > b.name ) // return 1; // return 0; // }); // }); // 添加“添加文件”的按钮, uploader.addButton({ id: '#filePicker2', label: '继续添加' }); uploader.on('ready', function() { window.uploader = uploader; }); // 当有文件添加进来时执行,负责view的创建 function addFile( file ) { var li = $( '<li id="' + file.id + '">' + '<p class="title">' + file.name + '</p>' + '<p class="imgWrap"></p>'+ '<p class="progress"><span></span></p>' + '</li>' ), btns = $('<div class="file-panel">' + '<span class="cancel">删除</span>' + '<span class="rotateRight">向右旋转</span>' + '<span class="rotateLeft">向左旋转</span></div>').appendTo( li ), prgress = li.find('p.progress span'), wrap = li.find( 'p.imgWrap' ), info = $('<p class="error"></p>'), showError = function( code ) { switch( code ) { case 'exceed_size': text = '文件大小超出'; break; case 'interrupt': text = '上传暂停'; break; default: text = '上传失败,请重试'; break; } info.text( text ).appendTo( li ); }; if ( file.getStatus() === 'invalid' ) { showError( file.statusText ); } else { // @todo lazyload wrap.text( '预览中' ); uploader.makeThumb( file, function( error, src ) { var img; if ( error ) { wrap.text( '不能预览' ); return; } if( isSupportBase64 ) { img = $('<img src="'+src+'">'); wrap.empty().append( img ); } else { $.ajax('../server/preview.php', { method: 'POST', data: src, dataType:'json' }).done(function( response ) { if (response.result) { img = $('<img src="'+response.result+'">'); wrap.empty().append( img ); } else { wrap.text("预览出错"); } }); } }, thumbnailWidth, thumbnailHeight ); percentages[ file.id ] = [ file.size, 0 ]; file.rotation = 0; } file.on('statuschange', function( cur, prev ) { if ( prev === 'progress' ) { prgress.hide().width(0); } else if ( prev === 'queued' ) { //li.off( 'mouseenter mouseleave' ); //解除事件监听 //btns.remove(); li.find( 'span.rotateLeft' ).remove(); //移除左旋转按钮 li.find( 'span.rotateRight' ).remove(); //移除右旋转按钮 } // 成功 if ( cur === 'error' || cur === 'invalid' ) { console.log( file.statusText ); showError( file.statusText ); percentages[ file.id ][ 1 ] = 1; } else if ( cur === 'interrupt' ) { showError( 'interrupt' ); } else if ( cur === 'queued' ) { percentages[ file.id ][ 1 ] = 0; } else if ( cur === 'progress' ) { info.remove(); prgress.css('display', 'block'); } else if ( cur === 'complete' ) { li.append( '<span class="success"></span>' ); } li.removeClass( 'state-' + prev ).addClass( 'state-' + cur ); }); li.on( 'mouseenter', function() { btns.stop().animate({height: 30}); }); li.on( 'mouseleave', function() { btns.stop().animate({height: 0}); }); btns.on( 'click', 'span', function() { var index = $(this).index(), deg; switch ( index ) { case 0: uploader.removeFile( file ); return; case 1: file.rotation += 90; break; case 2: file.rotation -= 90; break; } if ( supportTransition ) { deg = 'rotate(' + file.rotation + 'deg)'; wrap.css({ '-webkit-transform': deg, '-mos-transform': deg, '-o-transform': deg, 'transform': deg }); } else { wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')'); // use jquery animate to rotation // $({ // rotation: rotation // }).animate({ // rotation: file.rotation // }, { // easing: 'linear', // step: function( now ) { // now = now * Math.PI / 180; // var cos = Math.cos( now ), // sin = Math.sin( now ); // $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')"); // } // }); } }); li.appendTo( queue ); } // 负责view的销毁 function removeFile( file ) { var li = $('#'+file.id); var img_src = li.attr('studyfox_img'); delete percentages[ file.id ]; updateTotalProgress(); li.off().find('.file-panel').off().end().remove(); //后台删除图片 $.ajax({ url: '$delete_url', type: 'POST', data: {'img': img_src}, success: function(result, textStatus){ //图片删除成功后移除文本框图片信息,三种情况 ,号位置在前 后 或没有,号 var images_value = $('#info_$field').val();//隐藏文本框的值 images_value = images_value.replace(img_src+',', ''); //替换,号在右边 images_value = images_value.replace(','+img_src, ''); //替换,号在左边 images_value = images_value.replace(img_src, ''); //直接替换 //重新赋值 $('#info_$field').val(images_value); }, error: function(XMLHttpRequest, textStatus){ layer.alert('删除失败!', {icon:2}); } }); } //上传成功返回文件名 uploader.on('uploadSuccess', function(file,response){ var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ','; $('#info_$field').val( images_value + response); //在当前图片LI里添加图片地址 $('#'+file.id).attr('studyfox_img',response); }); function updateTotalProgress() { var loaded = 0, total = 0, spans = progress.children(), percent; $.each( percentages, function( k, v ) { total += v[ 0 ]; loaded += v[ 0 ] * v[ 1 ]; } ); percent = total ? loaded / total : 0; spans.eq( 0 ).text( Math.round( percent * 100 ) + '%' ); spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' ); updateStatus(); } function updateStatus() { var text = '', stats; if ( state === 'ready' ) { text = '选中' + fileCount + '张图片,共' + WebUploader.formatSize( fileSize ) + '。'; } else if ( state === 'confirm' ) { stats = uploader.getStats(); if ( stats.uploadFailNum ) { text = '已成功上传' + stats.successNum+ '张图片至服务器,'+ stats.uploadFailNum + '张图片上传失败,<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>' } } else { stats = uploader.getStats(); text = '共' + fileCount + '张(' + WebUploader.formatSize( fileSize ) + '),已上传' + stats.successNum + '张'; if ( stats.uploadFailNum ) { text += ',失败' + stats.uploadFailNum + '张'; } } info.html( text ); } function setState( val ) { var file, stats; if ( val === state ) { return; } upload.removeClass( 'state-' + state ); upload.addClass( 'state-' + val ); state = val; switch ( state ) { case 'pedding': placeHolder.removeClass( 'element-invisible' ); queue.hide(); statusBar.addClass( 'element-invisible' ); uploader.refresh(); break; case 'ready': placeHolder.addClass( 'element-invisible' ); $( '#filePicker2' ).removeClass( 'element-invisible'); queue.show(); statusBar.removeClass('element-invisible'); uploader.refresh(); break; case 'uploading': $( '#filePicker2' ).addClass( 'element-invisible' ); progress.show(); upload.text( '暂停上传' ); break; case 'paused': progress.show(); upload.text( '继续上传' ); break; case 'confirm': progress.hide(); $( '#filePicker2' ).removeClass( 'element-invisible' ); upload.text( '开始上传' ); stats = uploader.getStats(); if ( stats.successNum && !stats.uploadFailNum ) { setState( 'finish' ); return; } break; case 'finish': stats = uploader.getStats(); if ( stats.successNum ) { layer.alert( '上传成功' ); } else { // 没有成功的图片,重设 state = 'done'; location.reload(); } break; } updateStatus(); } uploader.onUploadProgress = function( file, percentage ) { var li = $('#'+file.id), percent = li.find('.progress span'); percent.css( 'width', percentage * 100 + '%' ); percentages[ file.id ][ 1 ] = percentage; updateTotalProgress(); }; uploader.onFileQueued = function( file ) { fileCount++; fileSize += file.size; if ( fileCount === 1 ) { placeHolder.addClass( 'element-invisible' ); statusBar.show(); } addFile( file ); setState( 'ready' ); updateTotalProgress(); }; uploader.onFileDequeued = function( file ) { fileCount--; fileSize -= file.size; if ( !fileCount ) { setState( 'pedding' ); } removeFile( file ); updateTotalProgress(); }; uploader.on( 'all', function( type ) { var stats; switch( type ) { case 'uploadFinished': setState( 'confirm' ); break; case 'startUpload': setState( 'uploading' ); break; case 'stopUpload': setState( 'paused' ); break; } }); uploader.onError = function( code ) { if(code == "Q_EXCEED_NUM_LIMIT") { layer.alert("只能上传 $maxnumber 张图片"); } else if(code == "F_DUPLICATE") { layer.alert("重复上传"); } else { layer.alert("错误代码:" + code); } }; upload.on('click', function() { if ( $(this).hasClass( 'disabled' ) ) { return false; } if ( state === 'ready' ) { uploader.upload(); } else if ( state === 'paused' ) { uploader.upload(); } else if ( state === 'uploading' ) { uploader.stop(); } }); info.on( 'click', '.retry', function() { uploader.retry(); } ); info.on( 'click', '.ignore', function() { alert( 'todo' ); } ); upload.addClass( 'state-' + state ); updateTotalProgress(); }); })( jQuery ); </script> EOF; return $str; } ~~~