多文件上传字段的重力形式预览缩略图 [英] gravity form preview thumbnails for multi file upload field

问题描述

我们正在使用重力形式将多个图像附加到画廊自定义字段并创建新帖子.我们无法弄清楚如何在导入HTML5导入字段下显示图像缩略图，而不仅仅是提交表单之前的文件名.

We are using Gravity Forms to attach multiple images to a gallery custom field and create new post. We can't figure out how to show the image thumbnails under the import HTML5 import field instead of just the file names prior to form submission.

上一个答案仅涵盖单个文件上传:图像上传的重力形式预览

This previous answer covers only single file upload: gravity form preview of image upload

这种机制似乎与众不同.

That mechanism is different it seems.

我还看到GF提供了JS函数来过滤返回的图像数据，但是我不知道如何获取临时img网址来显示标签.该参考在这里:

I also see GF offers a JS function to filter the image data returned but I can't figure out how to get the temporary img urls to display tags. That reference is here:

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

推荐答案

仅显示缩略图大小的图像预览.您需要将映像转换为base64，因此加载时间不会很长，并且显示效果非常完美.

To show the preview of the image with just thumbnail size. You need to convert your image to the base64 so it will not take much time to load and it will show perfect.

 /**
 * 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');

这篇关于多文件上传字段的重力形式预览缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！