4

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

这个之前的答案只涵盖了单个文件上传：gravity form preview of image upload

这种机制似乎有所不同。

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

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

2 回答 2

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');
于 2019-11-29T07:20:39.473 回答
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 中使用图像，因为这是在完整提交表单之前上传图像的文件夹。

/{some-numbers-and-letters}/

这是 tmp 文件夹所在的文件夹。我想你可以改变它。

于 2018-09-24T09:35:21.097 回答