为题描述：
产品需求是分两步上传文件和提交页面用户输入的数据：第一步，利用form上传文件和一部分数据，第二步，上传文件成功得到后端服务器返回的文件id，再一次连同文件id和页面其他信息一同提交后台（也就是先上传一个文件，然后再利用文件id绑定到具体的“用户”上）。
首先form应该这样写
<form method="" action="" enctype="multipart/form-data" target="iframeName"></form>再创建一个隐藏的iframe在此就叫iframe1吧
以上form中的属性都必须有，其中enctype是form上传文件是的格式，target的值就是隐藏iframe的name属性的值。直接submit就可以提交form表单，此时后台返回的数据会在这个隐藏的iframe1中，此时问题来了，文件上传成功后后台返回的文件id是在iframe1中的 ，然而iframe1和主页面是不同域下的所以就牵扯到了跨域问题。
解决跨域问题的办法就是在首先写好一个中间页面tem.html，此中间页面就是完成文件和具体“用户”绑定操作（提交相关数据给后台）。将这个中间页面放在和iframe1同一个域下。
tem.html中主要是 var body = parent.window.patchIframe.document.body; 来获得iframe1中的内容，具体写法视情况而定，此时就可以在tem.html中得到文件的id。
用js动态生成一个隐藏的iframe2，并在iframe2中加载这个中间页面tem.html，请求tem.html时将需要和文件id绑定的“用户数据拼到url中”。这一步主要就是访问tem.html让他运行读取，此时tem.html中就可以得到具体“用户”的数据，也能得到文件id,然后直接发给指定的接口。执行的此其实异步提交form已经成功了，但是主页面是没有反应的，用户体验不好。
最有一步就是iframe2和主页面之间的通信，告诉主页面操作成功。使用到的办法就是postMessage方法，详见
主页面得到数据就可以做用户友好的反馈。
