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" style="margin-top: 30px;">    <div class="bar" style="width: 0%;"></div></div><script    class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="<?php echo \common\CommFun::base_url() ?>statics/saas/scm/app2_release/js/common/plugins/fileupload/js/vendor/jquery.ui.widget.js"></script><script    class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="<?php echo \common\CommFun::base_url() ?>statics/saas/scm/app2_release/js/common/plugins/fileupload/js/jquery.iframe-transport.js"></script><script    class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="<?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