yii - 如何在 Yii 的 CMultiFileUpload 中删除“未选择文件”？

Question

刚开始学习Yii。我不知道如何更改按钮并删除 Yii 框架中小部件“CMultiFileUpload”中的“未选择文件”？

$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

这取决于浏览器。前任。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. 在您的 javascript 文件中添加此 jQuery 代码

   $(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>