/**
* 注册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
);
}
/**
* 注册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
);
}