欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

html里如何达成异步上传文件

企业模板

  代码如下:

  <formaction="/hehe"method="post">

  <inputtype="text"value="hehe"/>

  <inputtype="submit"value="upload"id="upload"/>

  </form>

  这是html中最容易见到最容易的表单提交方法,但这种方法需要会切换页面,或许有的时候大家期望可以在同一个页面与服务器进行交互,并不期望提交完表单后切换到另一个页面去,如何解决呢,这里推荐几种表单提交的方法。

  第一介绍一种曲线救国的解法,以上的代码片段不需要改变,只须添加以下代码

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

  并且在form表单中添加target属性,target=uploadFrame,target属性需要与iframe中的id的值一致(或者是name属性的值,尝试一下就了解了)。

  容易讲解一下,其实这里大家的表单提交之后也是刷新了,但为何没跳转页面呢,就是由于这个iframe,其实大家刷新在iframe中了,而iframe是空的,也就跟没刷新是一样的了,就给大家一种异步的感觉,这并非正统的办法,但也不失为一种曲线救国方法,当然不少状况下这种方法也不适用,譬如大家期望提交完成表单后从服务器取回点什么东西,这种办法显然就不可以了,这里大家还需要真的的异步提交表当。

  (二)jquery异步提交表单

  这里介绍的是jquery的一种提交表单的插件ajaxupload,用方法也是比较容易的

  

  <body>

  <formaction="/hehe"method="post">

  <inputtype="text"value="hehe"/>

  <inputtype="button"value="upload"id="upload"/>

  <!--<inputtype="button"value="send"onclick="send()"/>-->

  </form>

  <script>

  (function(){

  newAjaxUpload("#upload",{

  action:'/hehe',

  type:"post",

  data:{},

  name:'textfield',

  onSubmit:function(file,ext){

  alert("上传成功");

  },

  onComplete:function(file,response){

  }

  });

  })();

  </script>

  </body>

  这里贴出了主要的代码,在页面渲染完成之后,大家就用一个自实行的函数给id为upload的按钮添加异步上传事件,newAjaxUpload(id,object)中的id对应的就是绑定对象的id,至于第二个参数中介绍一下data是附加的数据,name可以随意,onSubmit函数是上传文件之前的回调函数,第一个参数file是文件名,ext是文件的后缀名,至于onComplete函数中可以处置服务器返回的数据。以上是两种容易的文件上传推广客户端的达成。


本文转载自中文网


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.srgoc.cn 关注: 时间:2022-05-01 14:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/HTML/HTMLjichu/20220501/14018.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧