重力表单预览多文件上传字段的缩略图

Question

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

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

这种机制似乎有所不同。

我还看到 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;
});

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 中使用图像，因为这是在完整提交表单之前上传图像的文件夹。

/{some-numbers-and-letters}/

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