Question

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

上一个答案仅涵盖单个文件上传：gravity form preview of image upload

这种机制似乎与众不同。

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

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

您找到了解决方案吗？如果没有，我想分享我的：

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文件夹所在的文件夹。我想你可以改变它。

Answer 2

仅以缩略图尺寸显示图像预览。您需要将映像转换为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');

多文件上传字段的重力形式预览缩略图

2 个答案: