ajax 文件上传 所有文件通过一个上传地址处理,该怎么处理 [ 2.0 版本 ]
使用 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部分的代码写的有问题,应该这样写:
<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 条回复zhenhua2340 回复于 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();
杨淇 觉得很赞
其他 3 个回答
-
我通过查看文档的多文件上传,觉得你可以尝试下修改两个地方:
- 视图文件 name 应该是个数组
<input id="input-700" name="Articles[]" type="file" multiple >
- 控制器
你应该调用 UploadedFile::getInstances() 而不是 UploadedFile::getInstance() 来把 UploadedFile 实例数组赋值给 UploadForm::imageFiles。
$model->images = UploadedFile::getInstances($model, 'Articles');
共 2 条回复zhenhua2340 回复于 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 :
而我又想弄个统一的上传地址,所以这个值也不知道怎么写 -
被你的思路带偏了。图片上传一个方法就能搞定了。如果你有不同的表单要保存不同的图片,最好的做法是把文件上传的name值都写成一样的,调用一个方法ajax上传图片,完成以后,返回一个文件id,或者图片路径,用ajax把返回的值放到隐藏域里边,最后跟表单一起提交就行了。这样就获得了保存了图片的信息。也不用写多个接收文件上传的代码。如果还有问题可以跟我联系~~~~
共 1 条回复zhenhua2340 回复于 2016-11-27 22:20 回复其实这段话,才是 “ 最佳答案 ” ^ _ ^
点错了, 不能修改,算了....
文件上传的name值都写成一样的,调用一个方法ajax上传图片,完成以后,返回一个文件id,或者图片路径,用ajax把返回的值放到隐藏域里边
被 这句就点醒了
非常感谢 !!!
zhenhua2340
最后登录:2024-05-09
在线时长:17小时24分
- 粉丝4
- 金钱1015
- 威望0
- 积分1185