README

渲染一个 Jasny File Input Bootstrap 小部件。

安装

安装此扩展的首选方式是通过 composer。

添加 GitHub 仓库

    "repositories": [
        {
            "type": "git",
            "url": "https://github.com/mirocow/yii2-file-input-widget.git"
        }
    ]

然后

php composer.phar require --prefer-dist "mirocow/yii2-file-input-widget" "*"

或者添加

"mirocow/yii2-file-input-widget" : "*"

到应用程序的 composer.json 文件的 require 部分中。

使用方法

使用模型

    public function behaviors() {
        $behaviors = [          
            'fileupload' => [
                'class' => 'mirocow\fileinput\behaviors\UploadFileBehavior',
                'attributeName' => 'file'
            ],            
        ];
        
        return $behaviors;
    }

或使用 LocalStorage 提供者

    public function behaviors() {
        $behaviors = [          
            'fileupload' => [
                'class' => 'mirocow\fileinput\behaviors\UploadFileBehavior',
                'provider' => 'mirocow\fileinput\providers\LocalStorage',
                'savePathAlias' => '@app/web/uploads',
                'publicPath' => 'uploads',
                'attributeName' => 'name',
                'multiple' => true,
                'fileTypes' => $this->fileTypes,
            ],            
        ];
        
        return $behaviors;
    }

或使用 Uploads.Im 提供者

    public function behaviors() {
        $behaviors = [          
            'fileupload' => [
                'class' => 'mirocow\fileinput\behaviors\UploadFileBehavior',
                'provider' => 'mirocow\fileinput\providers\UploadsImStorage',
                'savePathAlias' => '@app/web/uploads',
                'publicPath' => 'uploads',
                'attributeName' => 'name',
                'multiple' => true,
                'fileTypes' => $this->fileTypes,
            ],            
        ];
        
        return $behaviors;
    }

或扩展模型 File

示例

<?php

    namespace app\modules\core\models;

    use mirocow\fileinput\models\File;

    class Image extends File
    {


    }

使用视图

示例 1

use mirocow\fileinput\FileInput;

<?=FileInput::widget([
    'model' => $model,
    'name' => 'Image[name][]', // image is the attribute
    // using STYLE_IMAGE allows me to display an image. Cool to display previously
    // uploaded images
    'thumbnail' => $model->getThumbnailUrl(),
    'style' => FileInput::STYLE_IMAGE
]);?>

示例 2

<?= FileInput::widget([
  'name' => 'Image[name][]',
  'style' => FileInput::STYLE_INPUT,
  //'style' => FileInput::STYLE_CUSTOM,
  //'customView' => __DIR__ . '/widgets/file_input.php',
  'addMoreButton' => true,
  'buttonCaption' => 'Дбавить еще',
])?>

使用视图：JQuery Ajax 上传

Js 文件

$('#my-form form').submit(function(){

    var form = new FormData();

    $.each($('#data-form :input'), function(i, file) {
        var field_name = this.name;

        if(this.name) {
          if ($(this)[0].files) {
            $.each($(this)[0].files, function (i, file) {
              if(file.size) {
                form.append(field_name, file);
              }
            });
          } else {
            var v = $(this).val();
            if(v) {
              form.append(field_name, v);
            }
          }
        }
    });

    $.ajax({
        type: "POST",
        url: path,
        data: form,
        cache: false,
        contentType: false,
        processData: false

    }).done(function( msg ) {

      // something...

    }).fail(function(msg){
        
      // Error  
        
    });

    return false;
});

Html 模板表单

<form class="form-horizontal" enctype="multipart/form-data" id="data-form">

    <div class="col-xs-8">

        <div class="form-group">
            <textarea name="Order[comment]" class="form-control" rows="3" placeholder="Commet"></textarea>

            <br>

            <?= FileInput::widget([
              'name' => 'Image[name][]',
              'style' => FileInput::STYLE_INPUT,
              //'style' => FileInput::STYLE_CUSTOM,
              //'customView' => __DIR__ . '/widgets/file_input.php',
              'addMoreButton' => true,
              'buttonCaption' => 'Add more
            ])?>

            <button type="submit" class="btn btn-success btn-sm2">Submit</button>
        </div>
    </div>
</form>

Sql

CREATE TABLE `tbl_file` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) NOT NULL COMMENT 'ID профиля',
  `name` varchar(255) NOT NULL DEFAULT '' COMMENT 'Файл',
  `original_name` varchar(255) NOT NULL DEFAULT '',
  `path` varchar(255) NOT NULL DEFAULT '' COMMENT 'Путь до файла',
  `create_time` datetime DEFAULT NULL COMMENT 'Дата создания',
  `update_time` datetime DEFAULT NULL COMMENT 'Дата обновления',
  `entity_type` varchar(255) NOT NULL DEFAULT '' COMMENT 'Тип сущности',
  `entity_id` int(11) NOT NULL COMMENT 'ID сущности (Анкета, Запрос, Марка итд)',
  `mime_type` varchar(20) NOT NULL COMMENT 'Mime тип',
  `order` int(11) NOT NULL DEFAULT '0' COMMENT 'Сортировка',
  `data` text COMMENT 'Данные',
  PRIMARY KEY (`id`),
  KEY `fk_file_special_mark_id` (`entity_id`),
  KEY `fk_file_user_id` (`user_id`),
  CONSTRAINT `fk_file_user_id` FOREIGN KEY (`user_id`) REFERENCES `tbl_user` (`id`) ON DELETE NO ACTION ON UPDATE NO ACTION
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;