YII2+jquery.Fileupload 文件上傳

1、單個(gè)文件上傳

首先建立一個(gè)模型models/UploadForm.php,內(nèi)容如下

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'],
        ];
    }
}

再建立一個(gè)視圖文件，內(nèi)容如下

<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",//文件上傳地址，當(dāng)然也可以直接寫在input的data-url屬性內(nèi)
            formData: {param1: "p1", param2: "p2"},//如果需要額外添加參數(shù)可以在這里添加
            done: function (e, result) {
                //done方法就是上傳完畢的回調(diào)函數(shù)，其他回調(diào)函數(shù)可以自行查看api
                //注意result要和jquery的ajax的data參數(shù)區(qū)分，這個(gè)對(duì)象包含了整個(gè)請(qǐng)求信息
                //返回的數(shù)據(jù)在result.result中，假設(shè)我們服務(wù)器返回了一個(gè)json對(duì)象

                if (JSON.stringify(result.result) == '"200"') {
                    //alert('上傳成功')
                } else {
                    alert(JSON.stringify(result.result))
                }
            },
            progressall: function (e, data) {//設(shè)置上傳進(jìn)度事件的回調(diào)函數(shù)

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

最后建立控制器文件，內(nèi)容如下

//獲取新單據(jù)號(hào)
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 '格式不對(duì)';
            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