README

#为 Yii2 定制的 Blueimp 文件上传小部件

BlueImp jQuery File Upload 插件的 Yii2 版本。具有多文件选择、拖放支持、进度条、验证和预览图像、音频和视频功能的文件上传小部件。支持跨域、分块和可恢复的文件上传以及客户端图像缩放。

一个小部件，简单的配置，一切都能直接使用。

灵感来源于 https://github.com/2amigos/yii2-file-upload-widget

安装

从命令行

$ composer require limion/yii2-jquery-fileupload-widget:~1.0

或在您的 composer.json 中添加

"require": {
	"limion/yii2-jquery-fileupload-widget": "~1.0"
}	

使用方法

UI 版本

见： https://blueimp.github.io/jQuery-File-Upload/index.html
请注意，如果使用 "UI" 版本，您需要将小部件嵌入到现有的表单中。

<?php
use limion\jqueryfileupload\JQueryFileUpload;

<?php $form = ActiveForm::begin(); ?>
<?= JQueryFileUpload::widget([
        'model' => $model,
        'attribute' => 'img',
	'url' => ['upload', 'someparam' => 'somevalue'], // your route for saving images,
        'appearance'=>'ui', // available values: 'ui','plus' or 'basic'
        'gallery'=>true, // whether to use the Bluimp Gallery on the images or not
        'formId'=>$form->id,
        'options' => [
            'accept' => 'image/*'
        ],
        'clientOptions' => [
            'maxFileSize' => 2000000,
            'dataType' => 'json',
            'acceptFileTypes'=>new yii\web\JsExpression('/(\.|\/)(gif|jpe?g|png)$/i'),
            'autoUpload'=>false
        ]
    ]);?>
<?php ActiveForm::end(); ?>    

自定义 UI

您可以使用自己的模板来自定义上传、下载和主要视图的外观和感觉

<?php
use limion\jqueryfileupload\JQueryFileUpload;

<?php $form = ActiveForm::begin(); ?>
<?= JQueryFileUpload::widget([
        'model' => $model,
        'attribute' => 'img',
	'url' => ['upload', 'someparam' => 'somevalue'], // your route for saving images,
        'appearance'=>'ui', // available values: 'ui','plus' or 'basic'
        'uploadTemplateView'=>'@app/views/jqueryfileupload/upload', // upload template
        'downloadTemplateView'=>'@app/views/jqueryfileupload/download', // download template
        'mainView'=>'@app/views/jqueryfileupload/main', // main view with buttonbar
        'formId'=>$form->id,
        'clientOptions' => [
            'maxFileSize' => 2000000,
            'autoUpload'=>false
        ]
    ]);?>
<?php ActiveForm::end(); ?>    

Plus 版本

见： https://blueimp.github.io/jQuery-File-Upload/basic-plus.html

<?php
use limion\jqueryfileupload\JQueryFileUpload;

$js = <<< 'JS'
var uploadButton = $('<button/>')
    .addClass('btn btn-primary')
    .prop('disabled', true)
    .text('Processing...')
    .on('click', function (e) {
        e.preventDefault();
        var $this = $(this),
            data = $this.data();
        $this
            .off('click')
            .text('Abort')
            .on('click', function () {
                $this.remove();
                data.abort();
            });
        data.submit().always(function () {
            $this.remove();
        });
    }); 
JS;

$this->registerJs($js);

?>

<?= JQueryFileUpload::widget([
	'name' => 'files[]',
	'url' => ['upload', 'someparam' => 'somevalue'], // your route for saving images,
	'appearance'=>'plus', // available values: 'ui','plus' or 'basic'
	'options' => ['accept' => 'image/*'],
	'clientOptions' => [
		'maxFileSize' => 2000000,
		'acceptFileTypes'=>new yii\web\JsExpression('/(\.|\/)(gif|jpe?g|png)$/i'),
    'autoUpload'=>false
	],
	'clientEvents' => [
    'add' => "function (e, data) {
        data.context = $('<div/>').appendTo('#files');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')
                    .append($('<span/>').text(file.name));
            if (!index) {
                node
                    .append('<br>')
                    .append(uploadButton.clone(true).data(data));
            }
            node.appendTo(data.context);
        });
    }",
    'processalways' => "function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.preview) {
            node
                .prepend('<br>')
                .prepend(file.preview);
        }
        if (file.error) {
            node
                .append('<br>')
                .append($('<span class=\"text-danger\"/>').text(file.error));
        }
        if (index + 1 === data.files.length) {
            data.context.find('button')
                .text('Upload')
                .prop('disabled', !!data.files.error);
        }
    }",
    'progressall' => "function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
        );
    }",
    'done' => "function (e, data) {
        $.each(data.result.files, function (index, file) {
            if (file.url) {
                var link = $('<a>')
                    .attr('target', '_blank')
                    .attr('data-gallery','')
                    .prop('href', file.url);
                $(data.context.children()[index])
                    .wrap(link);
            } else if (file.error) {
                var error = $('<span class=\"text-danger\"/>').text(file.error);
                $(data.context.children()[index])
                    .append('<br>')
                    .append(error);
            }
        });
    }",
    'fail' => "function (e, data) {
        $.each(data.files, function (index) {
            var error = $('<span class=\"text-danger\"/>').text('File upload failed.');
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        });
    }"
  ],
]);?>

基本版本

见： https://blueimp.github.io/jQuery-File-Upload/basic.html

<?php
use limion\jqueryfileupload\JQueryFileUpload;

<?= limion\jqueryfileupload\JQueryFileUpload::widget([
        'url' => ['upload', 'someparam' => 'somevalue'], // your route for saving images,
        'appearance'=>'basic', // available values: 'ui','plus' or 'basic'
        'name' => 'files[]',
        'options' => [
            'accept' => 'image/*'
        ],
        'clientOptions' => [
            'maxFileSize' => 2000000,
            'dataType' => 'json',
            'acceptFileTypes'=>new yii\web\JsExpression('/(\.|\/)(gif|jpe?g|png)$/i'),
            'autoUpload'=>true
        ],
        'clientEvents' => [
            'done'=> "function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo('#files');
                });
            }",
            'progressall'=> "function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }"
        ]
    ]);?>