thinkphp整合系列之webuploader异步预览上传
万恶的百度虽然干了不少坏事；
但是百度的技术还是有值得称赞的地方；
就比如说开源的一系列产品；
今个要说的是文件上传组件：webuploader
先来简单说几个优点：以html5为主并在低版本的浏览器中支持flash模式；
兼容IE6+，iOS 6+, android 4+、分片并发、预览压缩、拖拽上传、md5秒传等等；
官网：http://fex.baidu.com/webuploader/
问答：https://github.com/fex-team/webuploader/issues
官网的文档写的很清楚了；自己都可以根据文档整合了；
这里之所以要写一篇博客是因为之前在thinkphp中深度整合了webuploader；
使用起来那是相当的简单方便；一次整合终身受益；
而且又不断的看到有童鞋们在整合的过程中碰壁；
这里就把整合好的代码分享出来以供参考；
示例项目：https://github.com/baijunyao/thinkphp-bjyadmin
一：导入webuploader
/Public/statics/webuploader-0.1.5
印象中是做了些什么修改的；但是年代久远；没有记录了；
建议直接复制项目中的这个文件夹；
二：添加自定义标签
/Application/Common/Tag/My.class.php
不懂自定义标签是个什么鬼的先移步thinkphp自定义模板标签(一)
protected $tags=array(
'webuploadercss'=>array('attr'=>'','close'=>0),
'webuploader'=>array('attr'=>'name,url,word','close'=>0),
'webuploaderjs'=>array('attr'=>'','close'=>0),
);
// webuploader的css部分和jquery因为插件需要引在jquery后边；所以在头部引入了jquery
public function _webuploadercss(){
$str=<<<php
<link rel="stylesheet" href="__PUBLIC__/statics/webuploader-0.1.5/xb-webuploader.css">
<script src="//libs.useso.com/js/jquery/1.10.2/jquery.min.js"></script>
php;
return $str;
}
// webuploader的js部分
public function _webuploaderjs(){
$str=<<<php
<script>
var BASE_URL = '__PUBLIC__/statics/webuploader-0.1.5';
</script>
<script src="//cdn.staticfile.org/webuploader/0.1.5/webuploader.min.js"></script>
php;
return $str;
}
/**
* 上传标签
* @param string $tag
* url：上传的图片处理的控制器方法
* name：表单name
* word：提示文字
*/
public function _webuploader($tag){
$url=isset($tag['url'])?$tag['url']:U('Home/Index/ajax_upload');
$name=isset($tag['name'])?$tag['name']:'file_name';
$word=isset($tag['word'])?$tag['word']:'或将照片拖到这里，单次最多可选300张';
$id_name='upload-'.uniqid();
$str=<<<php
<div id="$id_name" class="xb-uploader">
<div class="queueList">
<div class="placeholder">
<div class="filePicker"></div>
<p>$word</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 class="webuploader-container filePicker2">
<div class="webuploader-pick">继续添加</div>
<div style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;" id="rt_rt_1armv2159g1o1i9c2a313hadij6">
</div>
</div>
<div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
<script>
jQuery(function() {
var \$ = jQuery, // just in case. Make sure it's not an other libaray.
\$wrap = \$("#$id_name"),
// 图片容器
\$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 = {},
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;
})(),
thisSuccess,
// WebUploader实例
uploader;
if ( !WebUploader.Uploader.support() ) {
alert( 'Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
throw new Error( 'WebUploader does not support the browser you are using.' );
}
// 实例化
uploader = WebUploader.create({
pick: {
id: "#$id_name .filePicker",
label: '点击选择文件',
multiple : true
},
dnd: "#$id_name .queueList",
paste: document.body,
// accept: {
// title: 'Images',
// extensions: 'gif,jpg,jpeg,bmp,png',
// mimeTypes: 'image/*'
// },
// swf文件路径
swf: BASE_URL + '/Uploader.swf',
disableGlobalDnd: true,
chunked: true,
server: "$url",
fileNumLimit: 300,
fileSizeLimit: 200 * 1024 * 1024, // 200 M
fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
});
// 添加“添加文件”的按钮，
uploader.addButton({
id: "#$id_name .filePicker2",
label: '继续添加'
});
// 当有文件添加进来时执行，负责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>' +
'<input class="bjy-filename" type="hidden" name="{$name}[]">'+
'</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 ) {
if ( error ) {
\$wrap.text( '不能预览' );
return;
}
var img = \$('<img src="'+src+'">');
\$wrap.empty().append( img );
}, 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();
}
// 成功
if ( cur === 'error' || cur === 'invalid' ) {
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);
delete percentages[ file.id ];
updateTotalProgress();
\$li.off().find('.file-panel').off().end().remove();
}
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 + '个';
}
if (fileCount==stats.successNum && stats.successNum!=0) {
$('#$id_name .webuploader-element-invisible').remove();
}
}
\$info.html( text );
}
uploader.onUploadAccept=function(object ,ret){
if(ret.error_info){
fileError=ret.error_info;
return false;
}
}
uploader.onUploadSuccess=function(file ,response){
\$('#'+file.id +' .bjy-filename').val(response.name)
}
uploader.onUploadError=function(file){
alert(fileError);
}
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.parent().removeClass('filled');
\$queue.hide();
\$statusBar.addClass( 'element-invisible' );
uploader.refresh();
break;
case 'ready':
\$placeHolder.addClass( 'element-invisible' );
\$( "#$id_name .filePicker2" ).removeClass( 'element-invisible');
\$queue.parent().addClass('filled');
\$queue.show();
\$statusBar.removeClass('element-invisible');
uploader.refresh();
break;
case 'uploading':
\$( "#$id_name .filePicker2" ).addClass( 'element-invisible' );
\$progress.show();
\$upload.text( '暂停上传' );
break;
case 'paused':
\$progress.show();
\$upload.text( '继续上传' );
break;
case 'confirm':
\$progress.hide();
\$upload.text( '开始上传' ).addClass( 'disabled' );
stats = uploader.getStats();
if ( stats.successNum && !stats.uploadFailNum ) {
setState( 'finish' );
return;
}
break;
case 'finish':
stats = uploader.getStats();
if ( stats.successNum ) {
} 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 ) {
alert( 'Eroor: ' + 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();
});
</script>
php;
return $str;
}三：接收上传文件的函数
/Application/Common/Common/function.php
/**
* 上传文件类型控制 此方法仅限ajax上传使用
* @param string $path 字符串 保存文件路径示例： /Upload/image/
* @param string $format 文件格式限制
* @param integer $maxSize 允许的上传文件最大值 52428800
* @return booler 返回ajax的json格式数据
*/
function ajax_upload($path='file',$format='empty',$maxSize='52428800'){
ini_set('max_execution_time', '0');
// 去除两边的/
$path=trim($path,'/');
// 添加Upload根目录
$path=strtolower(substr($path, 0,6))==='upload' ? ucfirst($path) : 'Upload/'.$path;
// 上传文件类型控制
$ext_arr= array(
'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'),
'photo' => array('jpg', 'jpeg', 'png'),
'flash' => array('swf', 'flv'),
'media' => array('swf', 'flv', 'mp3', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb'),
'file' => array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'htm', 'html', 'txt', 'zip', 'rar', 'gz', 'bz2','pdf')
);
if(!empty($_FILES)){
// 上传文件配置
$config=array(
'maxSize' => $maxSize, // 上传文件最大为50M
'rootPath' => './', // 文件上传保存的根路径
'savePath' => './'.$path.'/', // 文件上传的保存路径（相对于根路径）
'saveName' => array('uniqid',''), // 上传文件的保存规则，支持数组和字符串方式定义
'autoSub' => true, // 自动使用子目录保存上传文件 默认为true
'exts' => isset($ext_arr[$format])?$ext_arr[$format]:'',
);
// 实例化上传
$upload=new \Think\Upload($config);
// 调用上传方法
$info=$upload->upload();
$data=array();
if(!$info){
// 返回错误信息
$error=$upload->getError();
$data['error_info']=$error;
echo json_encode($data);
}else{
// 返回成功信息
foreach($info as $file){
$data['name']=trim($file['savepath'].$file['savename'],'.');
echo json_encode($data);
}
}
}
}四：接收上传文件的控制器方法
/Application/Home/Controller/IndexController.class.php
/**
* webuploader 上传文件
*/
public function ajax_upload(){
// 根据自己的业务调整上传路径、允许的格式、文件大小
ajax_upload('/Upload/image/');
}
/**
* webuploader 上传demo
*/
public function webuploader(){
// 如果是post提交则显示上传的文件 否则显示上传页面
if(IS_POST){
p($_POST);die;
}else{
$this->display();
}
}五：html中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>thinkphp整合系列之webuploader异步预览上传</title>
<webuploadercss />
</head>
<body>
<form action="{:U('Home/Index/webuploader')}" method="post">
<webuploader name="image" url="{:U('Home/Index/ajax_upload')}" word="或将照片拖到这里，单次最多可选300张" />
自定义附加字段：<input type="text" name="extend" value="上传的文件描述">
<input type="submit" value="提交">
</form>
<webuploaderjs />
</body>
</html>前面这么墨迹麻烦的整合了半天；最主要就是为了这一步的使用；
以后在需要上传的页面中；只需要添加三个标签就ok了；
在 head 中添加 <webuploadercss /> ；
在 body 结束前添加 <webuploaderjs /> ；
在需要需要上传的表单中添加 <webuploader /> ；
当然还可以自定义表单的名称、接收异步上传文件处理的url、提示文字；
<webuploader name="image" url="{:U('Home/Index/ajax_upload')}" word="或将照片拖到这里，单次最多可选300张" />//*******************************更新后的补充*********************************
2016.9.3更新内容如下；
- 选中图片后；会有 继续添加 按钮；
- 多图上传以数组形式传到后台
- 增加其他字段示例
本文为白俊遥原创文章,转载无需和我联系,但请注明来自白俊遥博客https://baijunyao.com 欢迎捐赠赞赏加入组织创建QQ群及捐赠渠道
- 上一篇： thinkphp整合系列之极验滑动验证码
- 下一篇： php生成csv格式的excel表格
- latest comments
- 总共183条评论
Cliff ：你好
2018-10-27 19:34:56 回复
余歌 ：你好 博主请问这个插件在整合后除了有预览功能 还有拖拽和排序功能吗
2018-06-11 14:45:51 回复
小龙虾 ：uygy
2018-06-08 18:25:22 回复
你可懂我 ：webuploader 上传视频默认以5mb做一个分片，上传成功之后，视频没有合成一个文件，返回的路径是其中的一部分，没办法用，是其中的那个属性，求大神解救
2018-04-20 11:15:38 回复
Ｓτｒīｖéｒ ：假如这些图片我要放入相册里，我同时需要一个相册id传给服务器端，这个id怎么传呢
2018-01-22 12:13:17 回复
追风筝的人 ：利用js拼接字符串 然后再传到后台
2018-06-13 09:20:05 回复
朝游东海 ：照着代码复制了一遍，已经做出来了，多谢大佬，赶脚又开启了新世界，明天自己改下html代码，然后用在项目上去
2017-09-29 19:05:22 回复
luke ：而且展示的要是缩略图 这个确实有一定技术难度
2017-08-30 16:35:33 回复
luke ：想把这个ID下的多图展示在webuploader中 然后实现编辑提交
2017-08-30 16:09:28 回复
luke ：大神你好 我想问下 我已经成功把多图上传整合到tp3.2.3 但是在编辑的时候怎么把这些图片显示在webuploader中呢 也就是一个商品修改他的多个主图
2017-08-30 16:08:02 回复
哈士奇不会迷路 ：我用的tp3.2.3引入这些为啥没用
2017-08-16 14:15:41 回复
luke ：请问你解决了吗
2017-08-29 18:21:03 回复
木 点点 i ：搞了两天还是没搞好，可以上传图片了，但是在整个表单提交的时候还是没打印出上传文件的地址。求仔细解答一下 qq1422712947
2017-07-28 22:27:40 回复
x ：请问这个解决了吗？我打印出来地址也是空的
2017-09-17 18:04:46 回复
仔仔 ：在新增窗口上传成功后，再次打开窗口，如何清除里面的图片呢？
2017-07-24 20:11:24 回复
云淡风晴 ：官方文档有清空的方法；
2017-07-24 22:49:04 回复
仔仔 ：你是说的这个romoveFile吧？我在保存成功后使用这个方法，根本没用啊 // 移除所有缩略图并将上传文件移出上传序列 for (var i = 0; i < uploader.getFiles().length; i++) { // 将图片从上传序列移除 uploader.removeFile(uploader.getFiles()[i]); // 将图片从缩略图容器移除 var $li = $('#' + uploader.getFiles()[i].id); $li.off().remove(); }
2017-07-25 10:20:06 回复
L ：未定义$wrap是怎么回事？
2017-06-29 10:45:08 回复
isu5 ：
呵呵，又解决了，，不是一般的好用
2017-06-20 10:21:16 回复
isu5 ：对了，怎么添加两个窗口呢？ 一个上传图片，一个上传文件，最好是能分开，怎么写？
2017-06-20 09:53:26 回复
isu5 ：怎么设置图片上传的个数呢
2017-06-19 16:09:09 回复
isu5 ：找到了，确实挺好用的。。。支持
2017-06-19 17:57:26 回复
寒末春初 非人非城 * ：webupload模态框弹出内无法点击选择文件，需在实例化upload之前给div加一个class，实例化完成后删除，即可点击
2017-06-13 10:49:31 回复
富秋 ：上传后的地址怎样获取？
2017-04-26 15:27:00 回复
云淡风晴 ：看示例；
2017-06-18 22:15:52 回复
清欢 ：我想问一下如何解决上传图片不切割 压缩
2017-04-10 09:31:52 回复
@ ：请问怎么打印出来返回的URL，返回值是有的 就是打印出来就成空的了 大神
2017-04-07 11:27:19 回复
爱便流通于世 ：白俊遥博客的webuploader返回路径怎么弄得呀!我想存到数据库
2017-06-02 20:28:44 回复
云淡风晴 ：看示例；
2017-06-18 22:16:06 回复
爱便流通于世 ：已解决!
2017-06-18 22:20:01 回复
L ：亲，你的路径怎么获得的呀？？求解惑
2017-06-28 23:31:13 回复
爱便流通于世 ：你肯定要提交的呀，看看示例
2017-06-29 08:44:22 回复
木 点点 i ：能具体点么
2017-07-28 21:17:29 回复
爱便流通于世 ：点击确认上传 后就可以打印
2017-08-04 13:04:53 回复
超╬═→ ：你好，我点击确认上传打印出来的image是空的，请问知道什么问题吗？
2017-09-25 09:39:33 回复
超╬═→ ：你好，我点击确认上传打印出来的image是空的，请问知道什么问题吗？
2017-09-25 09:40:15 回复
爱便流通于世 ：上传成功后，提交表单就能打印数据了。
2017-09-25 09:46:11 回复
超╬═→ ：我图片现在能成功上传到项目目录，但是打印提交的post表单数据时，数组是空的。
2017-09-25 09:59:43 回复
爱便流通于世 ：仔细看看代码，用表单提交的方式上传，不是ajax的方式，然后对照示例看看
2017-09-25 10:02:57 回复
超╬═→ ：发现我把模板目录设置到模块目录之外（跟博主模板目录路径一样）就可以打印出表单图片地址数据，但是将模板放到模块内打印出来就是空的（input标签的值可以打印出来），我想将模板放到模块内，请问楼主知道怎样解决吗。
2017-09-25 11:54:57 回复
超╬═→ ：发现我把模板目录设置到模块目录之外（跟博主模板目录路径一样）就可以打印出表单图片地址数据，但是将模板放到模块内打印出来就是空的（input标签的值可以打印出来），我想将模板放到模块内，请问楼主知道怎样解决吗。
2017-09-25 11:55:09 回复
超╬═→ ：发现我把模板目录设置到模块目录之外（跟博主模板目录路径一样）就可以打印出表单图片地址数据，但是将模板放到模块内打印出来就是空的（input标签的值可以打印出来），我想将模板放到模块内，请问楼主知道怎样解决吗。
2017-09-25 11:55:35 回复
爱便流通于世 ：可以解决啊 你可以卡目录结构设计那一块
2017-09-25 13:04:07 回复
爱便流通于世 ：define("TMPL_PATH","./tpl/");不定义这个他应该默认是内部了
2017-09-25 13:07:13 回复
超╬═→ ：define("TMPL_PATH","./tpl/");这个我之前就是没定义，在内部能访问到页面，但是就是提交后图片地址获取为空。设置了define("TMPL_PATH","./tpl/");将视图模板搬出去后，就能获取到图片地址。
2017-09-25 14:02:15 回复
爱便流通于世 ：目录结构你在看看
2017-09-25 14:09:43 回复
超╬═→ ：好像突然又可以了，谢谢楼主。帮了大忙！
2017-09-25 14:24:44 回复
病娇萌の狂三 ：啊QAQ大神...视频上传分片之后只返回一个分片后的路径根本用不了呀怎么把分片的所有视频返回呀~能不能加一下QQ 呜呜 QQ1138036174
2017-03-30 09:56:18 回复
天然呆 ：求大神解决上传视频接收的问题···上传后存储的哪儿就是几个分片 打不开的 急··有大神帮忙解决么 现在就要用这技术
2017-04-15 11:28:11 回复
黄兵 ：接收图片的返回地址被我解决了，详细请参考：http://pdf-lib.org/Home/Details/471
2017-03-29 13:06:18 回复
冷月光 ：可以加你qq吗
2017-03-14 10:13:14 回复
凌水 ：怎么将上传的大文件片段进行合并？？
2017-03-13 11:32:34 回复
奋斗(二维码中心) ：有没有tp5 使用的完整版介绍
2017-03-12 16:34:53 回复
立行搏 ：不错，我很喜欢这个插件
2017-03-09 18:19:30 回复
Ｈ▪Ｔ▪Ｔ® ：如果我想直接上传到七牛上，不保存在服务器，该怎么修改了？
2017-03-05 12:26:10 回复
阿迪 ：找到想看的文章了谢谢
2017-03-02 00:15:50 回复
墨承 ：大神，上传的时候文件分类保存到不同的子文件夹该如何做？ 求解 加个qq吧 296859251
2017-02-28 11:19:18 回复
Fey Art ：你好，能详细介绍下如何获得多个图片上传的路径吗？
2017-02-25 14:31:29 回复
D.va的爹爹 ：大神！你整合的东西真的很好用！我有个问题想请教下，当我编辑文章的时候如何能让webuploader中显示该文章中已经上传的图片
2017-02-23 17:40:38 回复
____＇＇D ：Eroor: Q_EXCEED_SIZE_LIMIT 我想上传视频文件为什么报这个错误啊，我在uploader.js 中已经设置 fileSizeLimit: 1024 * 1024 *1024 ，并且在Index控制器中调用 ajax_upload 方法，也设置了 ajax_upload('/Upload/video/','media','1073741824'); 为什么还是报这个错误，貌似设置都没效果，求解！！！
2017-02-22 11:09:30 回复
____＇＇D ：博主求解啊，现在问题是报错：F_EXCEED_SIZE ；这个要在哪里配置啊，求解，我QQ 2103989193
2017-02-22 11:35:23 回复
唯home ：白哥,如何多张上传要剪切的图啊
2017-02-17 23:41:27 回复
鱼香 ：
白哥，我引入css和js和jq文件了，但是那个蓝色的按钮不出来，就是4个字放哪，然后也不能点，用的tp框架。这是什么原因呢？
2017-02-10 11:38:09 回复
源 ：css少了
2017-02-20 14:10:17 回复
、涐侽。贼龙 ：白哥，问个东西，上传50M文件被分割成好几个切片，怎么整合起来成一个完整的文件呢，求解
2017-01-20 16:50:37 回复
云淡风晴 ：按顺序追加合并成一个文件；
2017-01-28 21:19:14 回复
费墨 ：博主，能请教个问题吗。THinkphp怎么设置路由像你的博客这样缩短URL 隐藏模块和控制器
2016-12-21 18:53:49 回复
云淡风晴 ：设置路由；可以参考源代码：http://git.oschina.net/shuaibai123/thinkbjy/blob/master/Application/Home/Conf/config.php
2016-12-22 22:38:52 回复
费墨 ：看了你下你的源码 改了下配置里面的U函数 在common下面加了个RU config里面配置了下路由规则提示我无法加载控制器，请问还有地方需要改吗？
2016-12-23 11:40:20 回复
费墨 ：看了你下你的源码 改了下配置里面的U函数 在common下面加了个RU config里面配置了下路由规则提示我无法加载控制器，请问还有地方需要改吗？
2016-12-23 11:40:30 回复
费墨 ：我搞定了 ，config里面有个配置写错了。感谢博主的源码
2016-12-23 11:43:57 回复
鸟人 ：分发上传文件后，如何合并文件？急，求
2016-12-06 11:26:52 回复
Antion Zhou ：可以加个QQ吗？42888585，有问题想问您，我post到的值是array空。 上传成功，能看见文件。
2016-11-28 18:46:41 回复
Vivian ：博主价格QQ:1370373713
2016-11-17 11:40:52 回复
Diana丿溥心 ：我想问一下，上传路径怎么设置，路径是个变量，怎么实现
2016-11-16 21:51:30 回复
云淡风晴 ：在php中可以自定义上传路径；
2016-12-05 23:20:05 回复
沧海一粟 ：你好，请问下能否出一个TP5的weibuploader的整合DEMO呢~~谢谢啦~
2016-10-30 21:25:15 回复
云淡风晴 ：容我忙过这段时间抽出空；
2016-11-03 23:57:14 回复
赵丹 ：添加文件就自动上传，跪求指教
2016-10-25 18:51:17 回复
云淡风晴 ：想要添加文件就自动上传的效果么？
2016-10-27 00:12:12 回复
妒妒涵 ：老大，我想上传的照片不要压缩，不要裁剪，做一个照片上传系统，照片拿来冲印的，该怎么弄，现在上传照片压缩太厉害，图片失真了，没法冲印出来。
2016-10-25 18:34:15 回复
云淡风晴 ：设置 compress 为false；
2016-10-27 00:13:45 回复
清欢 ：麻烦问一下您的图片压缩问题似乎如何解决的 我也遇到这个问题
2017-04-20 15:41:24 回复
Raul Gonzale ：白哥，你好~我如果想要更改显示上传页面的显示样式的话，怎么办？
2016-10-21 17:16:41 回复
云淡风晴 ：选中元素；直接改html和css即可；
2016-10-22 00:32:07 回复
扬笑留影 ：请问，上传图片成功后我如果要继续添加，那怎么办
2016-10-20 08:55:58 回复
云淡风晴 ：改成添加文件就自动上传好了；也不用点确认上传按钮了；
2016-10-22 00:33:42 回复
零零网络 ：请问这个做修改成，怎么读取之前上传的图片，显示在列表中？是要在js中遍历file对象吗？请指教
2016-10-12 12:59:46 回复
云淡风晴 ：之前上传的文件？那需要获取循环出来了；
2016-10-13 23:51:50 回复
淡远如风 ：帅白 !怎么获取上传后的图片的url呢
2016-10-08 12:51:19 回复
云淡风晴 ：我那个demo中；点了提交；就会打印上传后的路径；你可以下载下来测下；
2016-10-09 07:18:02 回复
海晨 ：请问打印的语句在哪里了，怎么没找见了~~图片上传成功了，返回的是name: "/Upload/image/2016-10-16/58026ec2aa58f.jpg"，在哪里可以接收到了~~求教
2016-10-16 02:14:22 回复
海晨 ：
我找见了~~ uploader.onUploadSuccess=function(file ,response){ $('#'+file.id +' .bjy-filename').val(response.name) }
2016-10-16 02:28:11 回复
海晨 ：终于搞定了~~
2016-10-16 02:53:57 回复
黄兵 ：接收图片的返回地址被我解决了，详细请参考：http://pdf-lib.org/Home/Details/471
2017-03-29 13:04:18 回复
@ ：
你是怎么搞定 的 我就是不知道怎么打印出来返回的URL
2017-04-07 11:23:24 回复
木 点点 i ：怎么弄的 求解
2017-07-28 21:25:38 回复
zhttty ：我用元素查看器 双击DIV之后就激活了 直接双击页面上的按钮没用
2016-09-26 17:26:54 回复
云淡风晴 ：请问是用的什么浏览器？
2016-09-28 00:06:55 回复
zhttty ：我百度了一下 是这个插件和bootstrap 本身就有冲突 bootstrap在tab标签页和拟态框的情况下 会禁止这个插件的初始化 不过不知道怎么解决
2016-09-28 09:06:42 回复
扬笑留影 ：是和样式display:none 有冲突。只要这个按钮所在的父节点有一个样式是display:none按钮就会失效
2016-12-07 09:06:32 回复
zhttty ：可能实在实例化的时候出了冲突
2016-09-26 17:21:48 回复
zhttty ：可能是哪里的命名有冲突 覆盖了
2016-09-26 17:15:38 回复
zhttty ：是这一条css 去掉虽然没有了样式 但功能可以实现了
2016-09-26 17:14:23 回复
zhttty ：应该是和这个标签 冲突
2016-09-26 17:11:32 回复
zhttty ：白老大 出现一个报错 当你的 这二个定义的标签放在一起会发生冲突 提示浏览器识别错误 会把浏览器识别成IE 然后不支持点击上传 拖拽上传还是可以的 你看一下
2016-09-26 16:58:28 回复
阿旭 ：白老大，可以加一下我QQ吗？新手有问题想问你273612689
2016-09-22 19:05:36 回复
云淡风晴 ：加了；
2016-09-22 22:39:03 回复
xff ：白哥 用这个插件可以将视频上传到oss上去嘛
2016-09-22 11:05:22 回复
云淡风晴 ：前面有一篇介绍oss的文章；两个配合使用就可以了；
2016-09-22 22:38:31 回复
xff ：这个博客静态末班能给我一个嘛.白哥;我也想自己做个博客
2016-09-22 10:16:35 回复
云淡风晴 ：有git源代码可以直接下载；
2016-09-22 22:38:01 回复
xff ：哪里可以发个链接嘛
2016-09-23 08:57:40 回复
云淡风晴 ：http://git.oschina.net/shuaibai123/thinkbjy
2016-09-23 21:37:24 回复
xff ：刚用了这感觉大哥你这整合的这个挺好的;能加个qq吗;我还有好多问题问你;729219697;
2016-09-22 10:14:00 回复
云淡风晴 ：加了；
2016-09-22 22:37:36 回复
。 ：我也留个qq634282422！ 新手一枚 可能有比较多看起来很傻的问题 望不要介意。。
2016-09-20 11:05:34 回复
云淡风晴 ：都是这样慢慢成长的；
2016-09-20 22:39:54 回复
阿旭 ：白老大，可以加一下我QQ吗？新手有问题想问你273612689
2016-09-22 17:05:07 回复
。 ：你好白哥 我今天第一次接触这个web百度的上传 是这样的 我只是想做一个小小的功能就是类似于后台轮播图管理 只需要一个上传图片的功能 ，并且能直接进行判断后缀和能上传到数据库 虽然您文档讲的很详细，但是我还是不怎么会使用和调用到tp里面 我的意思是 能麻烦更详细点 针对我们刚接触一脸懵逼的小白吗 谢谢！
2016-09-20 00:58:17 回复
云淡风晴 ：如果不需要上传预览进度等功能的话；直接使用type为file的input上传即可；这样比较简单些；
2016-09-20 22:39:35 回复
文子 ：上一条乱码了，你好，白同志，最近按照你的方法进行了整合，发现一个严重的问题，麻烦你评估下是哪个环节的问题。我在开发的管理系统里有个页面中添加了多个webuploader 在加载完这个页面后，其他页面部分区域鼠标点击后会弹出文件选择对话框。 如果没有加载该页面，则没此问题。还发现如果这个页面只有一个webuploader也没有问题，超过一个就出现上述问题。
2016-09-19 15:48:52 回复
云淡风晴 ：我测试了下；添加多个webuploader没有出现你说的情况；你尝试在一个单独页面添加多个webuploader呢？看是否是还有其他因素影响了；
2016-09-19 22:10:19 回复
文子 ：你好，白同志，最近按照你的方法进行了整合，发现一个严重的问题，麻烦你评估下是哪个环节的问题。我在开发的管理系统里有个页面中添加了多个webuploader 在加载完这个页面后，其他页面部分区域鼠标点击后会弹出文件选择对话框。 如果没有加载该页面，则没此问题。还发现如果这个页面只有一个webuploader也没有问题，超过一个就出现上述问题。
2016-09-19 15:44:40 回复
ChaosChip ：我把这个上传插件集成到后台一个模块中之后发现一个问题，$url如果传后台的地址{:U('Admin/Product/ajax_upload')}提交后打印$_POST数组发现图片数组有两个元素但是元素都为空，如果把地址换成{:U('Home/Index/ajax_upload')}就没有问题，不知道是怎么回事
2016-09-14 18:05:36 回复
云淡风晴 ：理论上没啥问题的；对照着检查下代码；
2016-09-15 08:08:01 回复
步入中年的一条汪 ：我上20M的视频 被分割成4份 只返回最后一个文件名.... = = 对于分割的文件 合并 有什么好办法解决吗
2016-09-13 16:29:05 回复
云淡风晴 ：容我过后处理下分片上传的方法；
2016-09-15 08:08:30 回复
白。 ：360的公共库停止服务了，一直加载不进去，推荐更换http://www.bootcdn.cn/的。
2016-09-08 16:55:49 回复
云淡风晴 ：感谢反馈；发现这个问题后已经替换为本地的jquery了；
2016-09-08 21:01:23 回复
肖义熙名草有主了 ：博主，您的这个只返回最后一张图片的地址，该怎么解决呢？您的demo中也是只有返回最后一张图片地址。
2016-09-02 15:40:08 回复
云淡风晴 ：已经更新了可以拉取最新的git版本测试；
2016-09-03 14:05:42 回复
空城 ：整合的不错 想问一下为什么不能上传多图呢 没有继续添加的按钮了
2016-09-02 15:23:42 回复
云淡风晴 ：已经更新了可以拉取最新的git版本测试；
2016-09-03 14:06:00 回复
：返回成功只返回一条数据啊
2016-08-31 20:06:26 回复
肖义熙名草有主了 ：解决问题了吗？
2016-09-02 15:38:58 回复
云淡风晴 ：已经更新了可以拉取最新的git版本测试；
2016-09-03 14:06:15 回复
哥本哈根的美 ：你好楼主,最新的git版本 在哪获取,图片只能获取最后一张的路径
2016-09-12 17:25:46 回复
云淡风晴 ：这个一直在更新的：http://git.oschina.net/shuaibai123/thinkphp-bjyadmin
2016-09-12 21:50:42 回复
：没有
2016-09-22 16:53:30 回复
hiwangqi ：支持支持
2016-08-25 00:04:05 回复
蓝天 ：为什么不能象baidu原demo里一样，可以一次选择多图了呢？
2016-08-18 22:54:40 回复
蓝天 ：拖动多图上传没问题，但是不可以点击按钮之后，选择多图
2016-08-19 10:03:57 回复
云淡风晴 ：这个是由multiple控制的；我更新了一个版本；允许同时选中多个文件了；
2016-08-19 21:17:37 回复
APP开发 ：你这个图片上传的js是没什么问题，你的控制器很大问题，多图上传不支持数组，只能生成一个图片name的隐藏域，还是感谢分享，多多交流改进，
2016-08-22 11:43:24 回复
云淡风晴 ：感谢指正；已经更新；
2016-09-03 14:07:31 回复
蓝天 ：感谢，感谢，博主的分享精神令人敬佩！
2016-09-09 08:54:55 回复
o(-"-)o(金) ：请问楼组这个还能实现多图上传吗？
2016-08-17 17:01:43 回复
云淡风晴 ：可以的；
2016-08-17 20:21:57 回复
轨迹HLGC ：博主，请问用您的上传插件。html的name="image"无值。控制器获取不到，这个是否是function的ajax_upload()的返回值有关
2016-08-14 16:46:31 回复
云淡风晴 ：打印下$_FILES；看是否有文件正常上传了；
2016-08-14 17:12:00 回复
轨迹HLGC ：图片可以成功上传到upload文件夹，但是没有返回路径
2016-08-14 18:07:14 回复
轨迹HLGC ：图片可以成功上传到upload文件夹，但是没有返回路径
2016-08-14 18:07:29 回复
轨迹HLGC ：$_FILES为空，是否是自定义标签我合入的时候出现了问题
2016-08-14 20:30:02 回复
云淡风晴 ：$_FILES如果为空的话；怎么图片会上传成功呢？是不是打印的位置不对？你用我的bjyadmin上传测试呢？
2016-08-14 21:03:37 回复
轨迹HLGC ：哈哈，博主好耐心解答，您的测试demo是正常的，但是我整块移植到我的项目，修改了自定义标签的url默认地址，就不行了，我这边再尝试调试一下，应该是我哪里错了
2016-08-14 21:29:48 回复
轨迹HLGC ：
目前定位的原因是开启页面追踪会影响输出，目前还没想到啥解决办法
2016-08-14 23:56:43 回复
云淡风晴 ：是说tp自带的调试面板吗？我项目中设置的默认是不显示TRACE的；
2016-08-15 21:46:34 回复
超╬═→ ：好像遇到同样的情况，图片能上传到upload目录，但是打印$_FILE是空的，请问一下楼主怎样解决呢？
2017-09-21 16:33:20 回复
轨迹HLGC ：
非常感谢博主的整合，目前自己博客也是用的这个上传，但是js那一块一直处理不好，试下您的上传插件
2016-08-11 18:11:16 回复
じ追※忆づ ：博主qq多少啊，我的1315723390，可以添加我吗，我有问题请教你
2016-08-09 14:10:53 回复
云淡风晴 ：加你了；
2016-08-09 14:14:31 回复
じ追※忆づ ：楼主我用你的开源博客在云虚拟主机上部署安装时，总是无法连接数据库，我信信息都填对的为何还是连接失败
2016-08-09 14:08:09 回复
云淡风晴 ：我再测下看看；
2016-08-09 14:14:21 回复
行者无疆 ：
2016-08-08 14:41:49 回复
小号 ：每天过来踩踩啦
2016-08-06 11:08:36 回复
北邮浪人 ：文件上传存在问题，比如上传10M的csv文件，会将文件切割，只剩下1M多，数据丢失严重，不知道出了什么问题，文件大小限制都是在10M以上的，好奇怪！
2016-08-02 21:30:31 回复
云淡风晴 ：js中也需要设置文件允许的最大尺寸；默认单个文件1M；现在我更改为50M了；你可以拉取再试试；
2016-08-03 16:35:45 回复
北邮浪人 ：还是不行的 不过这次要大一点了 达到2M了 这个变量我改过 但是没什么效果
2016-08-05 16:46:48 回复
小号 ：niemmeme
2016-08-06 18:31:26 回复
云淡风晴 ：那这意思是说更改设置可以起作用；
2016-08-07 21:12:04 回复
北邮浪人 ：这个确实很奇怪 我直接设置到500M 但是出来还是2M多 我看thinkphp里边的限制是5M 改那个也没有什么用 不知道什么地方出问题了 我直接拿你的代码部署测试了一下 也是这个问题
2016-08-08 09:36:36 回复
云淡风晴 ：看下是不是php.ini限制2M了？
2016-08-08 18:20:17 回复
北邮浪人 ：应该不是那个问题 因为另外一个类似的程序可以上传大的文件 查了一下 比如50.2M的文件，最后只有235kb的样子，后来查了一下分片，默认是5M的分片，刚好是那些分片信息全部丢失了 留下最后一点数据 应该是集成哪个地方出了问题
2016-08-09 11:01:22 回复
情F得以 ：啊
2018-06-11 17:16:32 回复
情F得以 ：不
2018-06-11 17:17:54 回复
小号 ：你好，我很喜欢你的博客，想学习点东西！！！
2016-07-31 09:15:34 回复
云淡风晴 ：谢谢；
2016-08-03 16:35:53 回复
Tommy ：厉害!看你的thinkphp整合系列已经成了一种习惯了!
2016-07-27 19:55:57 回复
云淡风晴 ：谢谢
2016-08-03 16:35:58 回复
null ：腻害
2016-07-26 18:09:39 回复
Beisha ：“文件上传组建” 错别字
2016-07-26 11:47:52 回复
云淡风晴 ：好的；改了；
2016-07-28 12:59:10 回复
最新评论