Yii Framework 开发教程(15) UI 组件 MultiFileUpload示例

た入场券 2023-10-16 19:14 1阅读 0赞

CMultiFileUpload 用于上传文件，支持一次同时上传多个文件。这个UI组件是基于[jQuery Multi File Upload ][jQuery Multi File Upload]插件。Yii 内置的很多UI组件都是基于JQuery，因此需要创建assets 目录用于存放动态生成的javascripts 等。

所上传的文件的信息可以通过$\_FILES\[widget-name\]来访问，比如，CMultiFileUpload的name为”files” 所上传的文件信息可以通过$\_FILES\['files'\]来访问。此外包含CMultiFileUpload的Form属性需要设置enctype=multipart/form-data。

本例创建一个upload目录用于存放上传的文件。我们通过配置文件设置中个上传文件导入目录。

修改/config/main.php 添加项目代码

**\[php\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  // application-level parameters that can be accessed
2.  // using Yii::app()->params\['paramName'\]
3.  'params'=>require(dirname(\_\_FILE\_\_).'/params.php'),

// application-level parameters that can be accessed
    // using Yii::app()->params['paramName']
    'params'=>require(dirname(__FILE__).'/params.php'),

为Application添加一些参数，存放参数的文件为 config/param.php

定义上传文件的目录如下：

**\[php\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  // this contains the application parameters that can be maintained via GUI
2.  return array(
3.  
4.  //upload directory
5.  'uploadDir' => 'upload/',
6.  );

// this contains the application parameters that can be maintained via GUI
    return array(
    
    //upload directory
    'uploadDir' => 'upload/',
    );

在代码中可以通过Yii::app()->params\['uploadDir'\] 来访问这个参数，对于这个简单的例子，你也可以直接使用upload/ 做为固定的常量而无需定义Application的参数params.

本例不需使用Model，我们定义View如下：

**\[php\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  <div class="form">
2.  <?php $form=$this\->beginWidget('CActiveForm',array(
3.  
4.  'method' =>'post',
5.  'htmlOptions'=>array('enctype'=>'multipart/form-data'),
6.  
7.  )); ?>
8.  
9.  <?php $this\->widget('CMultiFileUpload',array(
10. 'name'=>'files',
11. 'accept'=>'jpg|png',
12. 'max'=>3,
13. 'remove'=>'Remove',
14. //'denied'=>'', message that is displayed when a file type is not allowed
15. //'duplicate'=>'', message that is displayed when a file appears twice
16. 'htmlOptions'=>array('size'=>25),
17. )); ?>
18. 
19. <div class="row submit">
20. <?php echo CHtml::submitButton('Upload'); ?>
21. </div>
22. 
23. <?php $this\->endWidget(); ?>
24. </div>
25. 
26. <ul>
27. <?php foreach($this\->findFiles() as $filename): ?>
28. <li><?php echo CHtml::link($filename,
29. Yii::app()->baseUrl.'/'.Yii::app()->params\['uploadDir'\].$filename,
30. array('rel'=>'external'));?></li>
31. <?php endforeach; ?>
32. </ul>

<div class="form">
    <?php $form=$this->beginWidget('CActiveForm',array(
    
    	'method' =>'post',
    	'htmlOptions'=>array('enctype'=>'multipart/form-data'),
    
    	)); ?>
    
       <?php $this->widget('CMultiFileUpload',array(
       	'name'=>'files',
       	'accept'=>'jpg|png',
       	'max'=>3,
       	'remove'=>'Remove',
       	//'denied'=>'', message that is displayed when a file type is not allowed
       	//'duplicate'=>'', message that is displayed when a file appears twice
       	'htmlOptions'=>array('size'=>25),
       )); ?>
    
        <div class="row submit">
            <?php echo CHtml::submitButton('Upload'); ?>
        </div>
    
    <?php $this->endWidget(); ?>
    </div>
    
    <ul>
    <?php foreach($this->findFiles() as $filename): ?>
    	<li><?php echo CHtml::link($filename,
    			Yii::app()->baseUrl.'/'.Yii::app()->params['uploadDir'].$filename,
    	array('rel'=>'external'));?></li>
    <?php endforeach; ?>
    </ul>

使用CMultiFileUpload上传扩展名为jpg|png 的文件，CMultiFileUpload可以通过配置定义一些选项，具体可以[参考][Link 1]

修改其对应的Controller/Action。

**\[php\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  class SiteController extends CController
2.  \{
3.  /\*\*
4.   \* Index action is the default action in a controller.
5.   \*/
6.  public function actionIndex()
7.  \{
8.  
9.  if(isset($\_FILES\['files'\]))
10. \{
11. // delete old files
12. foreach($this\->findFiles() as $filename)
13. unlink(Yii::app()->params\['uploadDir'\].$filename);
14. 
15. //upload new files
16. foreach($\_FILES\['files'\]\['name'\] as $key=>$filename)
17. move\_uploaded\_file($\_FILES\['files'\]\['tmp\_name'\]\[$key\],
18. Yii::app()->params\['uploadDir'\].$filename);
19. \}
20. $this\->render('index');
21. \}
22. 
23. /\*\*
24.  \* @return array filename
25.  \*/
26. public function findFiles()
27. \{
28. return array\_diff(scandir(Yii::app()->params\['uploadDir'\]),
29. array('.', '..'));
30. \}
31. \}

class SiteController extends CController
    {
    	/**
    	 * Index action is the default action in a controller.
    	 */
    	public function actionIndex()
    	{
    
    		if(isset($_FILES['files']))
    		{
    			// delete old files
    			foreach($this->findFiles() as $filename)
    				unlink(Yii::app()->params['uploadDir'].$filename);
    
    			//upload new files
    			foreach($_FILES['files']['name'] as $key=>$filename)
    				move_uploaded_file($_FILES['files']['tmp_name'][$key],
    				Yii::app()->params['uploadDir'].$filename);
    		}
    		$this->render('index');
    	}
    
    	/**
    	 * @return array filename
    	 */
    	public function findFiles()
    	{
    		return array_diff(scandir(Yii::app()->params['uploadDir']),
    		array('.', '..'));
    	}
    }

Action方法首先删除upload目录下的文件，然后将上传的文件存放到该目录下。

[![201212125001][]][201212125001 1]

本例[下载][Link 2]

[jQuery Multi File Upload]: http://www.fyneworks.com/jquery/multiple-file-upload/
[view plain]: http://blog.csdn.net/mapdigit/article/details/8434580#
[Link 1]: http://www.yiiframework.com/doc/api/1.1/CMultiFileUpload
[201212125001]: http://www.imobilebbs.com/wordpress/wp-content/uploads/2012/12/201212125001.png
[201212125001 1]: http://www.imobilebbs.com/wordpress/archives/3980/attachment/201212125001
[Link 2]: http://www.imobilebbs.com/download/yii/MultiFileUploadDemo.zip