一个form表单里面又多个提交按钮。

Question

现在在做一个功能，点击"上传"将文件上传到后台，后台解析文件，将文件中的内容打包成json串发回前端，前端对这些信息做展示，然后点击"保存"根据这些信息插入数据库中。

问题是现在怎么在同一个form里面写"上传"和"保存"这两个提交方法。希望各位大神指点，可以的话给代码参考下，感激不尽！

Answer 1

这要看你怎么绑定函数了，你是想把函数绑定在form的submit事件呢。还是上传和保存的click事件各绑定一个函数，各绑定函数呢，就要type设成button，而不是submit

Answer 2

上传 和 保存 按钮分别绑定onclick事件，通过js/ajax实现你数据交互。

Answer 3

上传用ajax，保存用form
具体如下

<style>
<form action='yyy' method='xxx' id="the-form">
<input type="file" name='uploaded' accept='zzz'>
<span id="upload-button">上传</span>
<button type="submit" name="提交">
</form>
<script>
$(document).ready(function(){
   $('#upload-button').click(function(){
       var data = $("#upload-button")[0].files[0];
       var formData = new FormData();
       formData.append('uploaded', data);
       $.post('AAAAAA',formData).done(function(d){
         d = JSON.parse(d);
         # XXXXXXXX
       });

   });
   $("#the-form").submit(fucntion(){
       # submit code ...
   });
});
</script>

即使都用ajax，better吧

Answer 4

之前现在表单中设计一个上传标签,提示用户点击上传文件,用户点击弹出文件选择框,然后使用ajaxfileupload.js先将文件上传到后台,然后将文件保存后的id反馈到前台,最后点击保存按钮提交整个表单信息到后台.如果文件和表单信息都保存在一个后台可以使用该方法,如果文件单独有个服务器的话注意跨域问题

Answer 5

一般情况下你的上传方法应该通过异步实现，也就是ajax请求到后台获取，之后将返回的信息填充最终提交。

Answer 6

用ajax处理，一个提交按钮也不需要。