• JS

    如何实现在表单中嵌套表单来上传文件

    by on 2016年04月12日

有的时候需要使用表单来上传文件,实现起来前后端都简单,但是有的情形下前端实现起来就非常麻烦了,原因无非有几个:
1、表单提交之后表单会跳转
2、表单提交之后怎么获得结果?
3、文件上传的表单外面还有表单怎么办?

这里我直接将方案:
1、在form上设置target,让target的目标到页面当中的一个空的iframe

<iframe id=”tempframe” style=”display: none; height: 0;” name=”tempframe” width=”300″ height=”150″></iframe>

<form class=”form-upload” action=”/upload” enctype=”multipart/form-data” method=”post” target=”tempframe”>

<input type=”file” class=”file” />

</form>

2、想获取结果那么就是要有回调方法,这个可以从改造接口开始
接口返回的格式模仿jsonp,返回的是可运行的js,如:
<script>
parent.Callback({回调数据})//由于执行的js是在iframe当中,所以需要加上parent
</script>

这样在自己的JS里面写入一个 接收数据的回调方法如

function Callback (data) {

alert(data)

}

3、首先你得知道表单是不能嵌套表单的,这是规定。然后你要想实现表单的“嵌套”,我给出2个方法

1、给文件上传的表单设置绝对定位,以看起来是在主表单中

2、当操作文件上传表单的时候再给文件上传的地方加上表单,操作完成之后就删除,如使用jquery的wrap()方法和unwrap()方法

$(‘.file’).change(function() {
$(this).wrap(‘<form class=”form-upload” action=”/upload” method=”post” enctype=”multipart/form-data” target=”tempframe”></form>’);
$(‘.form-upload’).get(0).submit();
}

当文件上传获得回调的时候删 unwrap()掉form即可