Question

我正在创建一个用于创建和编辑产品的Yii2 activeForm，并希望该页面也能管理图像。我希望能够为产品上传（添加）图像，然后有一个可排序的预览区域，其中图像显示并可以按正确的顺序排序。我的计划是通过ajax / pjax将文件上传到临时文件夹，表单将从中拉出以在可排序区域中显示它们，并在保存模型后，图像将相应地移动/命名。

最初我使用Kartik's FileInput widget（可能是不必要的）和Kartik's Sortable Input来重新排序图片。

我相信我可以处理文件上传和移动/重命名，我的问题是如何将图像与表单的其余部分分开上传，然后让ActiveForm将它们拉入可排序的输入区域？此外，我还希望能够从中删除图像（在缩略图的一角有一个小x）。我熟悉使用pjax来包装网格视图，甚至使用pjax将表单提交到pjax方法（在模态中使用），但不知道如何在另一个表单中使用它并使另一个表单动态加载图像。

为了澄清，我的Product扩展了ActiveRecord，ImageForm扩展了Model。然后我ProductController执行以下Create操作：

public function actionCreate()
{
    $model = new Product();
    $images = new ImageForm();

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['view', 'id' => $model->id]);
    }

    return $this->render('create', [
        'model' => $model,
        'images' => $images,
    ]);
}

我的目标是能够将图片（通过ImageForm）上传到产品create视图中显示的临时位置。但是目前，使用窗口小部件中的上传功能只会重新加载页面，图像就会消失。

Answer 1

您可以使用单独的模型上传图片并使用相同的表单，只需传递$uploadForm模型对象来填充file的表单字段，您就可以使用{{1}可以通过kartik\FileInput通过ajax上传文件的小部件，您可以通过uploadUrl事件自动触发选择文件的上传，一旦上传，您有2个选项可供选择使用uploadAsync=>true并使用filebatchuploadsuccess在上传所有文件后触发或使用默认设置并使用filebatchuploadcomplete wchich将在每次上传文件后触发。这两个事件都提供了上传的文件列表，但是在提交文件后验证文件时要小心，如果出现错误则应该返回响应，以便通知用户没有上传的文件，你可以事件提供的文件列表或更好地使用控制器内的单独fileUploaded并通过action调用在您使用的相对成功函数内调用它并填充上传文件的列表如果您将它们保存在表中查询表以显示名称

fileselect：通过文件浏览按钮在文件输入中选择文件后触发此事件。这与更改事件略有不同，即使文件浏览对话框被取消，也会触发此事件。

您将如何使用

ajax

filebatchuploadcomplete：此事件仅在ajax上传时触发，并在完成同步OR异步ajax批量上载后触发。

其他可用参数包括：



文件：文件堆栈数组（如果不可用，则为空对象）。



extra：插件的uploadExtraData设置（如果不可用，则为空对象）。

示例代码

//get filinput object
var $input=$("#input-id");

 $input.on('fileselect', function(event, numFiles, label) {

    //trigger file upload with 1 sec delay
    setTimeout(function() {
    $input.fileinput("upload");
}, 1000);
});

Yii2 pjax文件上传，以便在activeForm

1 个答案: