Предварительный просмотр гравитационной формы для поля загрузки нескольких файлов

Question

Мы используем Gravity Forms, чтобы прикрепить несколько изображений к настраиваемому полю галереи и создать новый пост. Мы не можем понять, как отображать миниатюры изображений в поле импорта HTML5 для импорта, а не только в именах файлов перед отправкой формы.

Этот предыдущий ответ охватывает только одну загрузку файла: предварительный просмотр гравитационной формы загрузки изображения

Этот механизм кажется другим.

Я также вижу, что GF предлагает функцию JS для фильтрации возвращаемых данных изображения, но я не могу понять, как получить временные изображения для отображения тегов. Эта ссылка здесь:

gform.addFilter('gform_file_upload_markup', function (html, file, up, strings, imagesUrl) {
  var formId = up.settings.multipart_params.form_id,
  fieldId = up.settings.multipart_params.field_id;
  html = '<strong>' + file.name + "</strong> <img class='gform_delete' "
  + "src='" + imagesUrl + "/delete.png' "
  + "onclick='gformDeleteUploadedFile(" + formId + "," + fieldId + ", this);' "
  + "alt='" + strings.delete_file + "' title='" + strings.delete_file + "' />";

return html;
});

Answer 1

Чтобы показать предварительный просмотр изображения с размером только эскиза. Вам нужно преобразовать ваше изображение в base64, чтобы загрузка не занимала много времени и выглядела идеально.

 /**
 * Upload image action for Gravity Forms
 * This script displays the thumbnail upon image upload for multi file field.
 * 
 */

    function gravity_image_thumb() {
    if ( is_page('slugname') ) {
     ?>
    <script type="text/javascript"> 

    gform.addFilter('gform_file_upload_markup', function (html, file, up, strings, imagesUrl) {
        //alert(strings);

        //Path of your temp file
        var myFilePath = '/wp-content/uploads/gravity_forms/FormNameFolderURL/tmp/';

        var formId = up.settings.multipart_params.form_id,
        fieldId = up.settings.multipart_params.field_id;

        var fileName = up.settings.multipart_params.gform_unique_id + '_input_' + fieldId +'_'+ file.target_name;
        var fid =  "fid"+  Math.ceil((Math.random() * (10000 - 1000)) + 1000); 

        //Converting Image to the base64
        function convertImgToBase64URL(url, callback, outputFormat){
            var img = new Image();
            img.crossOrigin = 'Anonymous';
            img.onload = function(){
                var canvas = document.createElement('CANVAS'),
                ctx = canvas.getContext('2d'), dataURL;
                canvas.height = (300 * img.height)/img.width;
                canvas.width = 300; //img.width;
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                dataURL = canvas.toDataURL(outputFormat);
                callback(dataURL);
                canvas = null; 
            };
            img.src = url;
        }

        convertImgToBase64URL(myFilePath + fileName , function(base64Img){
          var ffid = "#"+fid;
          $(ffid).attr("src", base64Img); 
          console.log('RESULT:', base64Img);   
        });

        html = '<img id="'+fid+"\" src='' style='width:100%;height:auto;'/><img class='gform_delete' " + "src='" + imagesUrl + "/delete.png' "+ "onclick='gformDeleteUploadedFile(" + formId + "," + fieldId + ", this);' " + "alt='" + strings.delete_file + "' title='" + strings.delete_file + "' />";
        return html;
    });
    </script>

        <?php }

    }

add_action('wp_head','gravity_image_thumb');

Answer 2

Вы нашли решение для этого? Если нет, я хотел бы поделиться своим:

gform.addFilter('gform_file_upload_markup', function (html, file, up, strings, imagesUrl) {
var myFilePath = 'https://your-domain.com/wp-content/uploads/gravity_forms/1-0bfa8914c61ec9b6ff8b3e2c78f497f4/tmp/';

var formId = up.settings.multipart_params.form_id,
fieldId = up.settings.multipart_params.field_id;

var fileName = up.settings.multipart_params.gform_unique_id + '_input_' + fieldId +'_'+ file.target_name;

html = '<img src="' + myFilePath + fileName + "\"/>' <img class='gform_delete' "
+ "src='" + imagesUrl + "/delete.png' "
+ "onclick='gformDeleteUploadedFile(" + formId + "," + fieldId + ", this);' "
+ "alt='" + strings.delete_file + "' title='" + strings.delete_file + "' />";
return html;

});

Я использую изображение в /tmp, потому что это папка, в которую загружается изображение до полной отправки формы.

/1-0bfa8914c61ec9b6ff8b3e2c78f497f4/

это папка, в которой находится папка tmp. Я думаю, вы можете изменить это.