YII2+jquery.Fileupload 文件上传

1、单个文件上传

首先建立一个模型models/UploadForm.php,内容如下

namespace app\models;

use yii\base\Model;
use yii\web\UploadedFile;
/**
 * UploadForm is the model behind the upload form.
 */
class UploadForm extends Model{  
  
    /**
     * @var UploadedFile file attribute
     */
    public $file;    
    /**
     * @return array the validation rules.
     */
    public function rules()
    {        
        return [
            [['file'], 'file'],
        ];
    }
}

再建立一个视图文件，内容如下

<style type="text/css">
    .bar {
        width: 100%;
        height: 18px;
        background: green;
    }
    #sucess{  height: 18px;color: #d76f01; font-weight: 12px;display: none;}
</style>
<div id="sucess">上传成功</div>
<input type="file" name="UploadForm[file]" id="fileupload_input"/>
<div id="progress" >
    <div class="bar" ></div>
</div>

<script
    src="<?php echo \common\CommFun::base_url() ?>statics/saas/scm/app2_release/js/common/plugins/fileupload/js/vendor/jquery.ui.widget.js"></script>
<script
    src="<?php echo \common\CommFun::base_url() ?>statics/saas/scm/app2_release/js/common/plugins/fileupload/js/jquery.iframe-transport.js"></script>
<script
    src="<?php echo \common\CommFun::base_url() ?>statics/saas/scm/app2_release/js/common/plugins/fileupload/js/jquery.fileupload.js"></script>

<script type="text/javascript">
    $(function () {
        $("#fileupload_input").fileupload({
            url: "index.php?r=bill/include",//文件上传地址，当然也可以直接写在input的data-url属性内
            formData: {param1: "p1", param2: "p2"},//如果需要额外添加参数可以在这里添加
            done: function (e, result) {
                //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
                //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
                //返回的数据在result.result中，假设我们服务器返回了一个json对象

                if (JSON.stringify(result.result) == '"200"') {
                    //alert('上传成功')
                } else {
                    alert(JSON.stringify(result.result))
                }
            },
            progressall: function (e, data) {//设置上传进度事件的回调函数

                var progress = parseInt(data.loaded / data.total * 100);
                $('#progress .bar').css(
                    'width',
                    progress + '%'
                );
                if(progress==100){
                    $('#sucess').show()
                }
            }
        })
    });
</script>

最后建立控制器文件，内容如下

//获取新单据号
public function actionInclude(){
    $model = new UploadForm();

    if (Yii::$app->request->isPost) {
        $model->file = UploadedFile::getInstance($model, 'file');

        $allow = array('xls','xlsx');
        if ($model->file && in_array($model->file->extension,$allow)) {
            $result = $model->file->saveAs('uploads/' . $model->file->baseName . '.' . $model->file->extension);
            if($result){
                echo '200';
                exit;
            }else{
                echo '上传失败';
                exit;
            }
        }else{
            echo '格式不对';
            exit;
        }
    }

    return $this->render('includeView', ['model' => $model]);

}

YII2上传：http://www.yiichina.com/tutorial/328

fileupload:http://bbs.9ria.com/thread-245293-1-1.html

                http://www.jq22.com/jquery-info230