在activeForm中使用的Yi2 pjax文件上载

Question

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

最初，我使用Kartik的FileInput小部件（这可能是不必要的）和Kartik的可排序输入对图像进行重新排序。

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

为了澄清，我有一个扩展ActiveRecords的Products和一个扩展Model的ImageForm。然后，我使用下面的创建操作来执行productController：

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模型对象来填充文件的表单字段，您可以使用kartik\FileInput小部件，该小部件具有通过ajax通过uploadUrl上传文件的选项，您可以通过fileupload事件在选择文件时自动触发上载，一旦上载，您有两个选项，可以使用uploadAsync=

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

你打算如何使用它

//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);
});

此事件仅在ajax上传和同步或异步ajax批处理上传完成后触发。

其他可用参数包括：

>

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

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

样本代码

$('#input-id').on('filebatchuploadcomplete', function(event, files, extra) {
    //call the ajax function here to query the files that are uploaded
});