使用Ajax添加并删除缩略图

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请求？如果是，我如何删除不同的图像？或将它们添加到我的视图中。

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