2016-11-22 15:40:45 3398次浏览 4条回答 3 悬赏 55 金钱

使用 Bootstrap File Input 插件上传图片

使用 ajax 异步上传,

希望所有上传的图片全部使用一个上传地址

服务端的代码不知怎么处理 ?

备注: 不想使用 最原始的 $_FILES 来处理,

视图:

<div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">缩略图:</label>
    <div class="col-sm-10">
        <input id="input-700" name="Articles[thumb]" type="file" multiple >
    </div>
</div>
<script>
    $("#input-700").fileinput({
        language: "zh",
        allowedFileExtensions : ['jpg', 'jpeg', 'png','gif'],
        uploadUrl: "<?= Url::toRoute('/upload/index');?>", // server upload action
        uploadAsync: true,
        maxFileSize: 1000,
        maxFileCount: 5
    });
</script>

控制器:

    public function actionIndex()
    {
        $response = [];

        if (Yii::$app->request->isPost) {

            $model = new UploadForm();

            $model->images = UploadedFile::getInstance($model, 'thumb');

            $response['images'] = $model->images;
            $response['url'] = $model->upload();
            $response['id']  = Yii::$app->request->post('id');
            $response['file'] = $_FILES;
            $response['post'] = Yii::$app->request->post();

        }
        echo Json::encode($response);
    }

关键点 主要是

$model->images = UploadedFile::getInstance($model, 'thumb'); 中的2个参数 $model, 'thumb'

没搞懂,不知道怎么写,

目前 $model->images 为 NULL

求指点 。。。

最佳答案

  • weinirumo 发布于 2016-11-25 18:59 举报

    我看了你的代码,视图里边,如果不要多文件上传,就把multiple去掉,万一有人一次选多张,就只能上传最后一张。

    $model->images 为 NULL 说明你提交的信息没获取到。html部分的代码写的有问题,应该这样写:

    <input id="input-700" name="UploadForm[thumb]" type="file" >
    

    控制器里边的代码分析:

    public function actionIndex()
        {
            $response = [];
    
            if (Yii::$app->request->isPost) {
    
                $model = new UploadForm();  // 没问题
    
                $model->images = UploadedFile::getInstance($model, 'thumb'); // 如果form表单没写错的话,应该也没问题
    
                $response['images'] = $model->images;     // 这一句代码是把一个图片对象赋值给$response,没用
                $response['url'] = $model->upload();      // 这一句代码,是对的,但是不全对。因为UploadForm你都没写,里边的upload方法也是没有。
                $response['id']  = Yii::$app->request->post('id'); // 这个id有什么用,不太理解。
                $response['file'] = $_FILES;              // 把$_FILES都返回回来了,什么鬼?
                $response['post'] = Yii::$app->request->post(); // 这句代码没用
    
            }
            echo Json::encode($response);
        }
    

    我修改了一下你的代码,如下:

    public function actionIndex()
        {
            $response['error'] = 1;    // 设置返回的信息
    
            if (Yii::$app->request->isPost) {
    
                $model = new UploadForm(); 
    
                $model->images = UploadedFile::getInstance($model, 'thumb');
    
                $uploadres = $model->upload();  // 调用model的upload方法,这个方法需要去实现。
    
                if ($uploadres['error'] == 0) {
                    $response['id'] = $uploadres['id']; // 上传成功返回的图片id
                    $response['url'] = $uploadres['url'];  // 上传成功返回的图片url
                    $response['error'] = 0;             // 上传成功的表示,在前端js判断
                } else {
                    $response['errmsg'] = $uploadres['errmsg'];  // 赋值图片上传的错误信息,在前台输出
                }
    
            }
            echo Json::encode($response);
        }
    

    UploadForm里边的代码你可以参考一下这个,做一些修改就好了:

    <?php
    namespace app\models;
    
    use yii\base\Model;
    
    class UploadForm extends Model
    {
        public $thumb;  //用来保存文件
    
        public function rules(){
            return [
                [['thumb'],'file', 'skipOnEmpty' => false, 'extensions' => 'jpg, png, gif', 'mimeTypes'=>'image/jpeg, image/png, image/gif', 'maxSize'=>1024*1024*10, 'maxFiles'=>1],
                //设置图片的验证规则
            ];
        }
    
        public function upload(){
            $res = [];
            if ($this->validate()){ //调用验证方法
                $uploadpath = dirname(dirname(__FILE__)).'/web/uploads/';  //取得上传路径
                if (!file_exists($uploadpath)) {
                    @mkdir($uploadpath, 0777, true);
                }
                
                    $ext = $this->thumb->getExtension();  //获取文件的扩展名
                    $randnums = $this->getrandnums(); //生成一个随机数,为了重命名文件
                    $imageName = date("YmdHis").$randnums.'.'.$ext;  // 重命名文件
                    $filepath = $uploadpath.$imageName;  // 生成文件的绝对路径
                    if($this->thumb->saveAs($filepath)){    //上传,并保存结果
                        $res['error'] = 0;
                    }
    
                    // 还应该有保存到数据库的操作,这个你自己写吧,写完以后把id和url放到$res里边返回给控制器就可以了
                }
            }
    
            return $res; //返回结果
        }
    
        /**
         * 生成随机数
         * @return string 随机数
         */
        protected function getrandnums()
        {
            $arr = array();
            while (count($arr) < 10) {
                $arr[] = rand(1, 10);
                $arr = array_unique($arr);
            }
            return implode("", $arr);
        }
    }
    ?>
    
    1 条回复
    回复于 2016-11-27 22:25 回复
    $response['images'] = $model->images;
    $response['url'] = $model->upload();   其实就这一条是“有用”的,其他的都是调试,输出信息方便查看而已
    $response['id']  = Yii::$app->request->post('id');
    $response['file'] = $_FILES;
    $response['post'] = Yii::$app->request->post();
    
    觉得很赞
  • 回答于 2016-11-24 23:24 举报

    我通过查看文档的多文件上传,觉得你可以尝试下修改两个地方:

    • 视图文件 name 应该是个数组
    <input id="input-700" name="Articles[]" type="file" multiple >
    
    • 控制器
      你应该调用 UploadedFile::getInstances() 而不是 UploadedFile::getInstance() 来把 UploadedFile 实例数组赋值给 UploadForm::imageFiles。
    $model->images = UploadedFile::getInstances($model, 'Articles');
    
    2 条回复
    回复于 2016-11-25 11:07 回复

    ^^ 先感谢你为我解答 ^^

    目前没要求多文件上传,只是当个文件上传而已

    <input id="input-700" name="Articles[thumb]" type="file" multiple >
    

    这个视图文件我是模拟 activeForm 生成的,真实环境(创建文章)类似这样的:

    <?= $form->field($model, 'thumb')->widget(FileUpload::className(), [
        'options'=> [
            'language' => "zh",
            'allowedFileExtensions' => ['jpg', 'jpeg', 'png','gif'],
            'maxFileSize' => 2048,
            'showCaption' => true,
            'showRemove'  => false,
            'showUpload'  => false
        ]
    
    ]); ?>
    

    控制器:

    $model->images = UploadedFile::getInstance($model, 'thumb');
    

    主要是这个 $model ,不是 UploadForm 的实例,
    而 'thumb' 值 :
    文章的封面图片字段叫 'thumb' ,而友情链接的 图片 字段叫 logo :
    而我又想弄个统一的上传地址,所以这个值也不知道怎么写

    回复于 2016-11-25 19:06 回复

    类似thumb,和logo都是在model里边写死的。这个想法,不太好实现呀。就是算是开发接口,都是规定好上传的name值。这个问题还是值得研究一下的,不过我要下班了,有时间了再帮你想办法吧。

  • 回答于 2016-11-25 18:32 举报

    问题解决了吗?

  • 回答于 2016-11-26 10:44 举报

    被你的思路带偏了。图片上传一个方法就能搞定了。如果你有不同的表单要保存不同的图片,最好的做法是把文件上传的name值都写成一样的,调用一个方法ajax上传图片,完成以后,返回一个文件id,或者图片路径,用ajax把返回的值放到隐藏域里边,最后跟表单一起提交就行了。这样就获得了保存了图片的信息。也不用写多个接收文件上传的代码。如果还有问题可以跟我联系~~~~

    1 条回复
    回复于 2016-11-27 22:20 回复

    其实这段话,才是 “ 最佳答案 ” ^ _ ^

    点错了, 不能修改,算了....

    文件上传的name值都写成一样的,调用一个方法ajax上传图片,完成以后,返回一个文件id,或者图片路径,用ajax把返回的值放到隐藏域里边  
    

    被 这句就点醒了

    非常感谢 !!!

您需要登录后才可以回答。登录 | 立即注册
zhenhua2340
经理

zhenhua2340

注册时间:2014-11-07
最后登录:2018-04-11
在线时长:16小时56分
  • 粉丝4
  • 金钱1000
  • 威望0
  • 积分1160

热门问题