amp-html - AMP 中有没有办法在上传之前从输入表单中显示选定的图像？

Question

我想在使用 AMP（在客户端）上传之前显示输入表单文件中的图像，我试图避免将图像上传到临时文件夹并从那里加载的过程。这种形式是将项目（带图像）添加到列表中，它很容易被放弃，所以我想避免清除孤立图像。

我做了一些研究，发现所有解决方案都涉及 Javascript，例如this和this，但我不喜欢在“完整的 AMP 网站”中使用 javascript。

是否有使用 AMP 解决此问题的方法？

Answer 1

我解决了。我在此页面中看到允许 base64 作为 src 值，因此我实现了从表单接收图像并返回此数据的端点：

data:{content_type};base64,{coded_img}

然后我使用on属性来设置这个数据的状态，图像的src属性得到那个值。

<form id="item-form"
      method="post"
      action-xhr="//{{ request.get_host }}{% url 'submit-image' %}"
      target="_top"
      on="submit-success:AMP.setState({ currentItem: {imageUrl: event.response.image }})">
<input type='file' name='image'>
<button type='submit'></button></form>

<amp-img alt="Item Image"
         src=""
         [src]="currentItem['imageUrl']"
         width="150"
         height="150"
         layout="responsive">
</amp-img>

Answer 2

AMP 目前不支持该功能。一种解决方法是通过 iframe 嵌入表单并使用 JS 实现文件选择器。