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更新内容如下;

1:选中图片后;会有 继续添加 按钮;

2:多图上传以数组形式传到后台

3.   增加其他字段示例

白俊遥博客



白俊遥博客
请先登陆后发表评论
  • 最新评论
  • 总共45条评论
白俊遥博客

鸟人:分发上传文件后,如何合并文件?急,求

2016-12-06 11:26:52 回复

白俊遥博客

Antion Zhou:可以加个QQ吗?42888585,有问题想问您,我post到的值是array空。 上传成功,能看见文件。

2016-11-28 18:46:41 回复

白俊遥博客

BlueSky:博主价格QQ:1370373713

2016-11-17 11:40:52 回复

白俊遥博客

Diana丿溥心:我想问一下,上传路径怎么设置,路径是个变量,怎么实现

2016-11-16 21:51:30 回复

白俊遥博客
  • 云淡风晴 回复 Diana丿溥心:在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 回复
白俊遥博客

Raul Gonzale:白哥,你好~我如果想要更改显示上传页面的显示样式的话,怎么办?

2016-10-21 17:16:41 回复

白俊遥博客
  • 云淡风晴 回复 Raul Gonzale:选中元素;直接改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 回复
白俊遥博客

zhttty:我用元素查看器 双击DIV之后就激活了 直接双击页面上的按钮没用

2016-09-26 17:26:54 回复

白俊遥博客
  • 云淡风晴 回复 zhttty:请问是用的什么浏览器?
  • 2016-09-28 00:06:55 回复
白俊遥博客
  • zhttty 回复 云淡风晴:我百度了一下  是这个插件和bootstrap 本身就有冲突   bootstrap在tab标签页和拟态框的情况下 会禁止这个插件的初始化 不过不知道怎么解决
  • 2016-09-28 09:06:42 回复
白俊遥博客
  • 扬笑留影 回复 zhttty:是和样式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 <link rel="stylesheet" href="__PUBLIC__/statics/bootstrap-3.3.5/css/bootstrap.min.css" />去掉虽然没有了样式 但功能可以实现了

2016-09-26 17:14:23 回复

白俊遥博客

zhttty:应该是和这个标签<bootstrapcss /> 冲突

2016-09-26 17:11:32 回复

白俊遥博客

zhttty:白老大 出现一个报错  当你的 <bootstrapjs /> <webuploaderjs />这二个定义的标签放在一起会发生冲突 提示浏览器识别错误 会把浏览器识别成IE 然后不支持点击上传  拖拽上传还是可以的  你看一下

2016-09-26 16:58:28 回复

白俊遥博客

阿旭:白老大,可以加一下我QQ吗?新手有问题想问你273612689

2016-09-22 19:05:36 回复

白俊遥博客
  • 云淡风晴 回复 阿旭:加了;
  • 2016-09-22 22:39:03 回复
白俊遥博客

Aries.:白哥 用这个插件可以将视频上传到oss上去嘛

2016-09-22 11:05:22 回复

白俊遥博客
  • 云淡风晴 回复 Aries.:前面有一篇介绍oss的文章;两个配合使用就可以了;
  • 2016-09-22 22:38:31 回复
白俊遥博客

Aries.:这个博客静态末班能给我一个嘛.白哥;我也想自己做个博客

2016-09-22 10:16:35 回复

白俊遥博客
  • 云淡风晴 回复 Aries.:有git源代码可以直接下载;
  • 2016-09-22 22:38:01 回复
白俊遥博客
  • Aries. 回复 云淡风晴:哪里可以发个链接嘛
  • 2016-09-23 08:57:40 回复
白俊遥博客
  • 云淡风晴 回复 Aries.:http://git.oschina.net/shuaibai123/thinkbjy
  • 2016-09-23 21:37:24 回复
白俊遥博客

Aries.:刚用了这感觉大哥你这整合的这个挺好的;能加个qq吗;我还有好多问题问你;729219697;

2016-09-22 10:14:00 回复

白俊遥博客
  • 云淡风晴 回复 Aries.:加了;
  • 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 name="image" url="/Index/ajax_upload" word="抱杆" /> <webuploader name="image" url="/Index/ajax_upload" word="室外天线" /><webuploader name="image" url="/Index/ajax_upload" word="高压配电设备" /> 在加载完这个页面后,其他页面部分区域鼠标点击后会弹出文件选择对话框。 如果没有加载该页面,则没此问题。还发现如果这个页面只有一个webuploader也没有问题,超过一个就出现上述问题。

2016-09-19 15:48:52 回复

白俊遥博客
  • 云淡风晴 回复 文子:我测试了下;添加多个webuploader没有出现你说的情况;你尝试在一个单独页面添加多个webuploader呢?看是否是还有其他因素影响了;
  • 2016-09-19 22:10:19 回复
白俊遥博客

文子:你好,白同志,最近按照你的方法进行了整合,发现一个严重的问题,麻烦你评估下是哪个环节的问题。我在开发的管理系统里有个页面中添加了多个webuploader<tr> <td> <webuploader name="image" url="/Index/ajax_upload" word="抱杆" /> </td> <td> <webuploader name="image" url="/Index/ajax_upload" word="室外天线" /> </td> <td> <webuploader name="image" url="/Index/ajax_upload" word="高压配电设备" /> </td></tr>在加载完这个页面后,其他页面部分区域鼠标点击后会弹出文件选择对话框。 如果没有加载该页面,则没此问题。还发现如果这个页面只有一个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 回复

白俊遥博客
  • 云淡风晴 回复 ChaosChip:理论上没啥问题的;对照着检查下代码;
  • 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 回复
白俊遥博客

- ALLeys:支持支持

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 回复
白俊遥博客
  • 云淡风晴 回复 APP开发:感谢指正;已经更新;
  • 2016-09-03 14:07:31 回复
白俊遥博客
  • 蓝天 回复 云淡风晴:感谢,感谢,博主的分享精神令人敬佩!
  • 2016-09-09 08:54:55 回复
白俊遥博客

o(-"-)o(金):请问楼组这个还能实现多图上传吗?

2016-08-17 17:01:43 回复

白俊遥博客
  • 云淡风晴 回复 o(-"-)o(金):可以的;
  • 2016-08-17 20:21:57 回复
白俊遥博客

轨迹HLGC:博主,请问用您的上传插件。html的name="image"无值。控制器获取不到,这个是否是function的ajax_upload()的返回值有关

2016-08-14 16:46:31 回复

白俊遥博客
  • 云淡风晴 回复 轨迹HLGC:打印下$_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 回复
白俊遥博客
  • 云淡风晴 回复 轨迹HLGC:$_FILES如果为空的话;怎么图片会上传成功呢?是不是打印的位置不对?你用我的bjyadmin上传测试呢?
  • 2016-08-14 21:03:37 回复
白俊遥博客
  • 轨迹HLGC 回复 云淡风晴:哈哈,博主好耐心解答,您的测试demo是正常的,但是我整块移植到我的项目,修改了自定义标签的url默认地址,就不行了,我这边再尝试调试一下,应该是我哪里错了白俊遥博客
  • 2016-08-14 21:29:48 回复
白俊遥博客
  • 轨迹HLGC 回复 轨迹HLGC白俊遥博客目前定位的原因是开启页面追踪会影响输出,目前还没想到啥解决办法
  • 2016-08-14 23:56:43 回复
白俊遥博客
  • 云淡风晴 回复 轨迹HLGC:是说tp自带的调试面板吗?我项目中设置的默认是不显示TRACE的;
  • 2016-08-15 21:46:34 回复
白俊遥博客

轨迹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 回复
白俊遥博客

小号:你好,我很喜欢你的博客,想学习点东西!!!

2016-07-31 09:15:34 回复

白俊遥博客
  • 云淡风晴 回复 小号:谢谢;
  • 2016-08-03 16:35:53 回复
白俊遥博客

Tommy:厉害!看你的thinkphp整合系列已经成了一种习惯了!

2016-07-27 19:55:57 回复

白俊遥博客
  • 云淡风晴 回复 Tommy:谢谢
  • 2016-08-03 16:35:58 回复
白俊遥博客

Only Strive:腻害

2016-07-26 18:09:39 回复

白俊遥博客

b e s t _北沙:“文件上传组建”  错别字

2016-07-26 11:47:52 回复

白俊遥博客
  • 云淡风晴 回复 b e s t _北沙:好的;改了;
  • 2016-07-28 12:59:10 回复