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

Question

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

最初我使用 Kartik's FileInput widget (which may be unnecessary) and Kartik's Sortable Input 重新排序图像。

我相信我可以处理文件上传和 moving/renaming，我的问题是如何将图像与表单的其余部分分开上传，然后让 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 and use filebatchuploadsuccess which triggers after all files are uploaded or use default setting and use filebatchuploadcomplete 每次文件上传后都会触发。这两个事件都提供了已上传文件的列表，但在提交文件后验证文件时要小心，您应该 return 响应以防出现错误，以便用户收到未上传文件的通知上传后，您可以使用事件提供的文件列表，或者更好地在您的控制器中使用单独的 action，并通过 ajax 调用在您使用的相对成功函数中调用它，并填充列表上传的文件，如果您将它们保存在 table 中，查询 table 以显示名称

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

您将如何使用它

//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 批量上传后触发。

Additional parameters available are:

files: the file stack array (or empty object if not available).

extra: the uploadExtraData settings for the plugin (or empty object if not available).

示例代码

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

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

Yii2 pjax file upload for use within activeForm

pjax

yii2

active-form