<form action-xhr="https://test.domain.com/contact/image/upload/" method="POST" id="file-form" enctype='multipart/form-data'
class="form contact" on="submit-success: AMP.setState({ myItems: myItems.concat([event.response])})">
...
</form>
<form class="form contact"
action-xhr="https://test.domain.com/otherAction/"
id="contact-form"
method="post">
.....
<amp-state id="myItems">
<script type="application/json">
[]
</script>
</amp-state>
<amp-list layout="fixed-height" height="0" [src]="myItems" [height]="myItems.length * 40" items="." binding="no">
<template type="amp-mustache">
Item{{file}}:title: {{name}} ——file_size:{{text_file_size}}
<li>
<input type="hidden" name="attachment[{{file}}][name]" value="{{name}}"/>
<input type="hidden" name="attachment[{{file}}][file]" value="{{text_file_size}}"/>
</li>
</template>
</amp-list>
</form>
在使用AMP对项目页面进行AMP化的过程中,出现需要两个Form表单之间传递数据的情况。
如,用户在一个页面,及需要传递文件,又需要传递文字信息,同时,文件每次选择后,都要打印出来对应的信息,那么这个直接使用一个form表单我没找到方法处理,所以我将这两个部分分离开,一部分传递文件,一部分传递文字信息及文件信息。
这里表单1的返回JSON我的是{{'file':'1','name':'file_1_Name','text_file_size':'file_1_Size'},{'file':'2','name':'file_2_Name','text_file_size':'file_2_Size'}}
同理,如果要将一个表单提交后返回的信息进行展示,除了form表单支持的submit-success/submit-error这些外,也可以用上述类似方法。这样就可以将表单返回的信息展示在页面的任意位置了。 例子如下:
<amp-state id="getResponse" class="i-amphtml-element i-amphtml-layout-container i-amphtml-built" i-amphtml-layout="container" hidden="" aria-hidden="true">
<script type="application/json">
{
"success":"",
"message":""
}
</script>
</amp-state>
<li class="message" [class]="getResponse.success" style="list-style: none;">
<span [text]="getResponse.message"></span>
</li>
<form action-xhr="https://test.kyoye.com/myAction/" method="post" on="submit-success: AMP.setState({getResponse:{success:'message '+event.response.success,message:event.response.message}})" novalidate="">
...
</form>