html中多线程提交文档完成示例


拷贝编码
编码以下:

<form action="/hehe" method="post">
<input type="text" value="hehe"/>
<input type="submit" value="upload" id="upload"/>
</form>


拷贝编码
编码以下:

这是html中最多见最简易的表单递交方法,可是这类方法务必会切换网页页面,或许一些情况下大家期待能够在同1个网页页面与服务器开展互动,其实不期待递交完表单后切换到另外一个网页页面去,如何办呢,这里共享几种表单递交的方法。
最先详细介绍1种曲线图救国的解法,以上的编码片断无需更改,要是加上下列编码


拷贝编码
编码以下:

<iframe id="uploadFrame" name="uploadFrame"></iframe>

而且在form表单中加上target特性,target=uploadFrame,target特性必须与iframe中的id的值1致(或是name特性的值,试1试就了解了)。

简易解释1下,实际上这里大家的表单递交以后也是更新了,可是为何沒有自动跳转网页页面呢,便是由于这个iframe,实际上大家更新在iframe中了,而iframe是空的,也就跟沒有更新是1样的了,就给大家1种多线程的觉得,这其实不是正统的方式,可是也不失为1种曲线图救国方法,自然许多状况下这类方法也不可用,例如大家期待递交进行表单后从服务器取回来点甚么物品,这类方式明显就不好了,这里大家还必须真实的多线程递交表当。

(2)jquery多线程递交表单

这里详细介绍的是jquery的1种递交表单的软件ajaxupload,应用方法也是较为简易的

拷贝编码
编码以下:

<body>
<form action="/hehe" method="post">
<input type="text" value="hehe"/>
<input type="button" value="upload" id="upload"/>
<!--<input type="button" value="send" onclick="send()"/>-->
</form>
<script>
(function(){
new AjaxUpload("#upload", {
action: '/hehe',
type:"post",
data: {},
name: 'textfield',
onSubmit: function(file, ext) {
alert("提交取得成功");
},
onComplete: function(file, response) {
}
});
})();
</script>
</body>

这里贴出了关键的编码,在网页页面3D渲染进行以后,大家就应用1个自实行的涵数给id为upload的按钮加上多线程提交恶性事件,new AjaxUpload(id,object)中的id对应的便是关联目标的id,至于第2个主要参数中详细介绍1下data是额外的数据信息,name能够随便,onSubmit涵数是提交文档以前的回调函数涵数,第1个主要参数file是文档名,ext是文档的后缀名,至于onComplete涵数中能够解决服务器回到的数据信息。以上是两种简易的文档提交顾客端完成。