Как удалить "Нет выбранных файлов" в CMultiFileUpload в Yii?

Question

Просто начинаю изучать Yii. Я не знаю, как изменить кнопку и удалить "Нет выбранных файлов" в виджете "CMultiFileUpload" в рамках Yii Framework?

$this->widget('CMultiFileUpload', array(
    'model'=>$model,
    'attribute'=>'photos',
    'accept'=>'jpg|jpeg|gif|png',
    'name'=>'photos',
    'remove'=>'remove',
    'options'=>array(
    ),
    'denied'=>'File is not allowed',
    'max'=>4, // max 10 files
));

Answer 1

Это зависит от браузера. Ex. Mozilla отображает поле типа входного файла с надписью "Файлы не выбраны". В IE это будет происходить по-разному.

Если вы хотите скрыть сообщение "Файлы не выбраны", сделайте это с помощью CSS

input[type='file'] 
{
    color: transparent;
}

Если вы хотите настроить больше, попробуйте этот код ниже.

1. Добавьте этот код CSS в свой файл CSS

   #multFileUpload button#fileAlt
   {
       border: 3px solid #cccccc;
       background-color: #FF7B10 !important;
       color: #ffffff;
       font-size: 14px;
       padding: 10px 5px;        
       cursor: pointer;
       border-radius: 5px;
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
   }
   #multFileUpload input[type='file'] 
   {
       display: none;
   }    
   

2. Добавьте этот код jQuery в свой файл JavaScript

   $(document).ready(function()
   {
       var maxFiles = 4;
       var fileCountStart = 0;
       $("#fileAlt").on('click', function()
       {
           fileCountStart += 1;
           if (maxFiles >= fileCountStart)
           {
               $('#photos').trigger('click');
               if (fileCountStart == maxFiles)
                   $("#fileAlt").attr('disabled', 'disabled');
           }
       });
   });
   

3. Теперь Yii код

   <div id="multFileUpload">
       <button id="fileAlt">Select an Image</button>
       <?php            
       $this->widget('CMultiFileUpload', array(
           'model' => $model,
           'id'=>'photos',
           'attribute' => 'photos',
           'accept' => 'jpg|jpeg|gif|png',
           'name' => 'photos',
           'remove' => 'remove',
           'options' => array(
           ),
           'denied' => 'File is not allowed',
           'max' => 4, // max 10 files
       ));
       ?>
   </div>