HTML中Form表单内置多个Action

2019/02/21

364

我们都知道在html中,一个简单上传文件的form表单如下:

<form method="post" enctype="multipart/form-data">
    <label>文件</label>
    <input type="file" name="file" />
    <button>导入</button>
</form>

对于简单的需求,上述表单都可以解决问题。

但是如果这里需要两个提交按钮呢?
按钮1:预览,将文件上传到服务器,服务器解析后,将数据展示到返回的视图中。
按钮2:导入,导入文件中的数据。

这时候,我们需要在一个表单中实现多个Action参数。或许你已经想到了,监听按钮点击事件,使用其它插件来实现上传文件。但是如果你不想使用额外的插件和 js,也不想在这块增加额外的工作,可以使用formaction来解决。

用法

<form method="post" enctype="multipart/form-data">
    <label>文件</label>
    <input type="file" name="file" />
    <button formaction="Preview">预览</button>
    <button formaction="Import">导入</button>
</form>

定义

formaction 属性会覆盖 form 元素的 action 属性。
该属性适用于 type="submit" 以及 type="image"

formaction 属性是 input 标签在 HTML5 中的新属性。

评论