使用 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
求指点 。。。
我看了你的代码,视图里边,如果不要多文件上传,就把multiple去掉,万一有人一次选多张,就只能上传最后一张。
$model->images 为 NULL 说明你提交的信息没获取到。html部分的代码写的有问题,应该这样写:
控制器里边的代码分析:
我修改了一下你的代码,如下:
UploadForm里边的代码你可以参考一下这个,做一些修改就好了:
我通过查看文档的多文件上传,觉得你可以尝试下修改两个地方:
问题解决了吗?
被你的思路带偏了。图片上传一个方法就能搞定了。如果你有不同的表单要保存不同的图片,最好的做法是把文件上传的name值都写成一样的,调用一个方法ajax上传图片,完成以后,返回一个文件id,或者图片路径,用ajax把返回的值放到隐藏域里边,最后跟表单一起提交就行了。这样就获得了保存了图片的信息。也不用写多个接收文件上传的代码。如果还有问题可以跟我联系~~~~