Yii2 pjax 文件上传以在 activeForm 中使用

Question

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

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

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

为了澄清，我有一个扩展 ActiveRecord 的 Product 和一个扩展 Model 的 ImageForm。然后我有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 的表单字段，您可以使用具有选项的kartik\FileInput 小部件要通过ajax 通过uploadUrl 上传文件，您可以通过fileUploaded 事件自动触发选择文件的上传，一旦上传，您有2 个选项，您可以使用uploadAsync=>true 和使用filebatchuploadsuccess，这会在之后触发所有文件都已上传或使用默认设置并使用filebatchuploadcomplete wchich 将在每次文件上传后触发。这两个事件都提供了已上传文件的列表，但要小心，因为您在提交文件后验证文件，您应该在出现错误时返回响应，以便通知用户未上传的文件，您可以事件提供的文件列表或更好地在控制器中使用单独的action 并在您正在使用的相对成功函数中调用它表格查询表格以显示名称

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

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

其他可用参数有：

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

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

示例代码

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