自适应Forms中的内嵌图像

Last update: Wed Mar 26 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

适用对象：
Experience Manager 6.4
Experience Manager 6.5

主题：
自适应表单

创建对象：

有经验的
开发人员

一个常见用例是在自适应表单中将上传的图像显示为内嵌图像。默认情况下，上传的图像会显示为链接，可以通过在自适应表单中显示图像来增强此体验。本文将指导您完成显示内联图像所涉及的步骤。

添加占位符图像

第一步是在文件附件组件前添加占位符div。在下面的代码中，文件附件组件由其CSS类名photo-upload标识。 JavaScript函数是与自适应表单关联的客户端库的一部分。在文件附件组件的初始化事件中调用此函数。

/**
* Add Placeholder Image
* @return {string}
 */
function addTempImage(){
  $(".photo-upload").prepend(" <div class='preview'' style='border:2px solid;height:225px;width:175px;text-align:center'><br><br><div class='text'>3.5mm * 4.5mm<br>2Mb max<br>Min 600dpi</div></div><br>");

}

显示内嵌图像

用户上传图像后，将在文件附件组件的提交事件中调用下面列出的函数。函数会接收上传的文件对象作为参数。

/**
* Consume Image
* @return {string}
 */
function consumeImage (file) {
  var reader = new FileReader();
    console.log("Reading file");
  reader.addEventListener("load", function (e) {
    console.log("in the event listener");
    var image  = new Image();
    $(".photo-upload .preview .imageP").remove();
    $(".photo-upload .preview .text").remove();
    image.width = 170;image.height = 220;
    image.className = "imageP";
    image.addEventListener("load", function () {
      $(".photo-upload .preview")[0].prepend(this);
    });
    image.src = window.URL.createObjectURL(file);
  });
  reader.readAsDataURL(file);
}

在您的服务器上部署

使用AEM包管理器在AEM实例上下载并安装客户端库。
使用AEM包管理器在AEM实例上下载并安装示例表单。
将浏览器指向添加内联图像
单击“附加照片”按钮添加图像

recommendation-more-help

8de24117-1378-413c-a581-01e660b7163e