Question

我需要在yii2应用中创建和删除缩略图。我必须有最多5张图片，当我选择文件时，我可能会看到该图像的缩略图。我在视图中添加了图像：

?= $form->field($images, 'imagesFiles[]')->fileInput(['multiple' => true, 'accept' => 'image/*','id'=>'gallery-photo-add'])->label(false) ?>

我可以在我的控制器中获取图像：

 $images->imagesFiles = UploadedFile::getInstances($images,'imagesFiles');

如何查看缩略图？我需要创建ajax请求吗？如果是，我如何删除不同的图像？或者将它们添加到我的视图中，也可以使用一些id。

Answer 1

如果您想在从磁盘中选择图像后查看图像，则在提交表单之前，您可以使用javascript在视图中预览所选文件，例如：

$('#gallery-photo-add').on('change', function() {
    var input = $(this)[0];
    var images = $('#some-div');
    for (var i=0; i<input.files.length; i++) {
        if (input.files && input.files[i]) {
            var reader = new FileReader();
            reader.onloadend = function (e) {
                images.append('<img src="'+e.target.result+'" />');
            };
            reader.readAsDataURL(input.files[i]);
        }
    }
});

使用ajax添加和删除缩略图

1 个答案: