TP5用webuploader实现图片上传

return [
    'admin' => '/static/admin',
],

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

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

$(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
        });

});

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;
}

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

$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
});

<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);
});

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(); //移除右旋转按钮
    }
});

$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);
});

//删除文件或图片
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;
}