由于项目的原因，需要异步上传文件，网上找了找，很多都是用jquery.form插件的，于是乎找资料，调代码，做点小笔记。

官方资料：http://www.malsup.com/jquery/form/

demo:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>File Upload Demo</title>

 </head>

 <body>

     <form id="up" enctype="multipart/form-data">

         <input type="file" name="file">

     </form>
11     <button id="doUp">GO</button>

     <script src="jquery.js"></script>

     <script src="jquery.form.js"></script>

     <script>

     $(function(){

         $("#doUp").on("click",function(){

             console.log($(this));

             $("#up").ajaxSubmit({

                 type:"post",

                 url:"http://target.com",

                 success:function(data){

                     console.log(data);

                 },

                 error:function(XmlHttpRequest,textStatus,errorThrown){

                     console.log(XmlHttpRequest);

                     console.log(textStatus);

                     console.log(errorThrown);

                 }

             })

         })

     })

     </script>

 </body>

 </html>

使用的时候需要引入Jquery.js和jquery.form.js两个库文件。

通常情况下都是使用ajaxSubmit()来提交form表单的数据，此方法的参数是个对象，具体如下

属性 描述
url Ajax请求将要提交到该url，默认是表单的action属性值
type 指定提交表单数据的方法（method）：“GET”或“POST”。默认值：表单的method属性值（如果没有找到默认为“GET”）。
dataType 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持：
'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。
'json'：如果dataType == 'json'， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。。
'script'：如果dataType == 'script'， 服务器响应将求值成纯文本。。
默认值：null（服务器返回responseText值）
target 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。
默认值：null。
beforeSubmit 表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。如果“beforeSubmit”回调函数返回false，那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。
默认值：null
success 表单成功提交后调用的回调函数。如果提供“success”回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值：null
clearForm 表示如果表单提交成功是否清除表单数据。默认值：null
resetForm 表示如果表单提交成功是否进行重置。默认值: null

或者可以直接将所有操作定义为一个对象，赋值给一个变量再传入ajaxSubmit()中，如：

 var options={

   url:"http://target",

   type:"POST",

   success:parse

 }

 function parse(data){

   console.log(data);  //这里是回调函数的代码

 }

 $("#up").ajaxSubmit(options);

jquery.form.js笔记的更多相关文章

  1. jquery.form.js实现异步上传

    前台页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...

  2. jquery.form.js不能解决连接超时（timeout）的解决方法

    最近在使用jquery.form.js提交包含文件的表单时,碰到了一个问题:当碰上网速较慢时,而我们又设置了timeout时,例如: var options = { timeout: 3000 //限 ...

  3. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  4. 文件上传时jquery.form.js中提示form.submit SCRIPT5: 拒绝访问

    利用其它控件触发file的click事件来选择文件后,使用jquery.form.js中的submit方法提交时IE报错:form.submit SCRIPT5: 拒绝访问,其它浏览器正常, < ...

  5. jquery.form.js表单插件的使用

    jquery.form.js官网:http://malsup.com/jquery/form API文档:http://malsup.com/jquery/form/#api 下载地址:http:// ...

  6. 异步上传图片，光用jquery不行，得用jquery.form.js插件

    异步上传图片,光用jquery不行,得用jquery.form.js插件,百度一下下载这个插件,加jquery,引入就可以了 <form id="postbackground" ...

  7. jQuery.form.js jQuery ajax异步提交form

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所 ...

  8. jQuery.form.js使用

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 下载地址 百度云:http://pan.baidu.com/s/1eQoYE46 360云:http://yu ...

  9. jquery.form.js详细讲解

    现在大家在在表单提交的时候都不流行中间页面做跳转(比如发布成功的提示页面),或者说这样做会降低用户体验.所以一般都是采用ajax来提交,能看到这个页面的朋友,想必对ajax提交表单已经是很熟悉了. 如 ...

随机推荐

  1. 非线性支持向量机SVM

    非线性支持向量机SVM 对于线性不可分的数据集, 我们引入了核(参考:核方法·核技巧·核函数) 线性支持向量机的算法如下: 将线性支持向量机转换成非线性支持向量机只需要将变为核函数即可: 非线性支持向 ...

  2. 静态、动态cell区别

    静态cell:cell数目固定不变,图片/文字固定不变(如qq设置列表可使用静态cell加载) 动态cell:cell数目较多,且图片/文字可能会发生变化(如应网络请求,淘宝列表中某个物品名称或者图片 ...

  3. Python语言学习：字符串常用的方法

    python字符串常用的方法 1. find( ):在字符串中搜索指定的值并返回它被找到的位置,如果没有找到,则返回-1 string.find(value,start,end) #value:必需, ...

  4. oBike退出新加坡、ofo取消免押金服务，全球共享单车都怎么了？

    浪潮退去后,才知道谁在裸泳.这句已经被说烂的"至理名言",往往被用在一波接一波的互联网热潮中.团购.O2O.共享单车.共享打车.无人货柜--几乎每一波热潮在退去后会暴露出存在的问题 ...

  5. 跟踪路由(tracert)及ping命令

    由于最近学校网络不好,老是有问题,加上最近写了个数据展示系统,要部署到买的域名下,用到了这两个命令 首先,一台服务器,一台工作站,一个笔记本(我的,来测试ip是否通的) 服务器已经部署了三个网站(一个 ...

  6. 缩写： i = i + 1 和 i += 1，可以看做是 i 自加的值 是1。

    i +=  1; 这样有助于记忆: i自加的值等于1

  7. Matlab高级教程_第二篇：Matlab相见恨晚的模块_02_全局变量的妙用_遍历穿透

    1 比如我这边写了一个函数,这个函数中有一个变量作为参数,给定这个参数一个值,然后这个函数返回给我一个值.但是,我写这函数的时候,这个传参我不写到函数里面.可以通过全局变量的方式进行在外部穿透遍历. ...

  8. WMS出库单重复

    发货通知单?WMS备货单选项勾选 不自动复制?新增?

  9. docker-compose up Windows named pipe error:(code: 2)

    执行docker-compose up启动项目时,报如下错误: ERRORERROR: Windows named pipe error: 膸碌脥艂艕艊藳禄碌藵脰赂露篓碌脛脦脛慕牛藝艁 (code: ...

  10. Ubuntu中Unable to acquire the dpkg frontend lock解决方案

    根据百度总结三种方式:第三种解决了我的问题 1. ps -e|grep apt-get 结果:6965 ? 00:00:01 apt-get 执行:sudo kill 6965 #强制解锁,会删除文件 ...