Exemple #1
0
    /**
     * 注册js
     */
    private function registerClientJs()
    {
        WebuploaderAsset::register($this->view);
        $web = \Yii::getAlias('@static');
        $server = $this->server ?: Url::to(['webupload']);
        $swfPath = \Yii::getAlias('@common/widgets/webuploader/assets');
        $this->view->registerJs(<<<JS
var uploader = WebUploader.create({
        auto: true,
        fileVal: 'upfile',
        // swf文件路径
        swf: '{$swfPath}/Uploader.swf',

        // 文件接收服务端。gy
        server: '{$server}',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#{$this->options['boxId']}',

        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });
uploader.on( 'uploadProgress', function( file, percentage ) {
    var li = \$( '#'+file.id ),
        percent = li.find('.progress .progress-bar');

    // 避免重复创建
    if ( !percent.length ) {
        percent = \$('<div class="progress progress-striped active">' +
          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
          '</div>' +
        '</div>').appendTo( li ).find('.progress-bar');
    }

    li.find('p.state').text('上传中 '+ (percentage * 100).toFixed(1) + '%');

    percent.css( 'width', percentage * 100 + '%' );
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadSuccess', function( file, data ) {
    \$( '#'+file.id ).find('p.state').text('上传成功').fadeOut();
    \$( '#{$this->options['boxId']} .webuploader-pick' ).html('<img src="{$web}'+data.url+'" width="{$this->options['previewWidth']}" height="{$this->options['previewHeight']}"/>');
    \$( '#{$this->options['id']}' ).val("{$web}" + data.url);
    \$( '#{$this->options['boxId']} .webuploader-pick' ).siblings('div').width("{$this->options['previewWidth']}").height("{$this->options['previewHeight']}");
});
JS
);
    }
Exemple #2
0
    /**
     * 注册js
     */
    private function registerQiniuClientJs()
    {
        WebuploaderAsset::register($this->view);
        $tokenUrl = $this->server ?: Url::to(['/site/webupload']);
        $swfPath = \Yii::getAlias('@webuploader/assets');
        $domain = rtrim(\Yii::$app->params['webuploader_qiniu_config']['domain'], '/');
        $this->view->registerJs(<<<JS
\$.get("{$tokenUrl}",function(res) {
    var uploader = WebUploader.create({
        auto: true,
        fileVal: 'file',
        chunked :false,
        // swf文件路径
        swf: '{$swfPath}/Uploader.swf',

        // 文件接收服务端。gy
        server: 'http://upload.qiniu.com/',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#{$this->options['boxId']}',

        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,

        formData: {
            token: res.uptoken
        }
    });
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var li = \$( '#{$this->options['boxId']} .uploader-list'),
        percent = li.find('.progress .progress-bar');

    // 避免重复创建
    if ( !percent.length ) {
        percent = \$('<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"></div></div>')
                .appendTo( li )
                .find('.progress-bar');
    }

    percent.css( 'width', percentage * 100 + '%' );
});
    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadSuccess', function( file, data ) {
        var url = '{$domain}/' + data.key;
        \$( '#'+file.id ).find('p.state').text('上传成功').fadeOut();
        \$( '#{$this->options['boxId']} .webuploader-pick' ).html('<img src="'+url+'" width="{$this->options['previewWidth']}" height="{$this->options['previewHeight']}"/>');
        \$( '#{$this->options['id']}' ).val(url);
        \$( '#{$this->options['boxId']} .webuploader-pick' ).siblings('div').width("{$this->options['previewWidth']}").height("{$this->options['previewHeight']}");
    });
}, 'json');

JS
);
    }