Jquery.form自动提交表单上传图片
先引入相关js文件
1 2 |
|
创建一个表单,表单放一个input[type=file]
1 2 3 |
|
注:有时候会出现表单嵌套,jquery.form在表单嵌套的时候会失败,所以要把以上表单拿到父表单外面,用js出发
以上注中:在父表单中定义节点#uploadimage,触发#impic_upload选择文件
1 2 3 4 |
|
jquery.form代码操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
父表单中简易结构
1 2 3 4 5 6 7 |
|
jquery.form表单插件API提供的方法
ajaxForm()
增加所有需要的事件监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。
可链接(Chainable):可以。
实例:
1 |
|
ajaxSubmit()
马上由AJAX来提交表单。大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。
可链接(Chainable):可以。
实例:
1 2 3 4 5 6 7 |
|
formSerialize()
将表单串行化(或序列化)成一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2。
可链接(Chainable):不能, 这个方法返回一个字符串。
实例:
1 2 3 |
|
fieldSerialize()
将表单的字段元素串行化(或序列化)成一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。这个方法将返回以下格式的字符串:name1=value1&name2=value2。
可链接(Chainable):不能,这个方法返回一个字符串。
实例:
1 |
|
fieldValue()
返回匹配插入数组中的表单元素值。从0.91版起,该方法将总是以数组的形式返回数据。如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。
可链接(Chainable):不能,该方法返回数组。
实例:
1 2 3 |
|
resetForm()
通过调用表单元素原有的DOM方法,将表单恢复到初始状态。
可链接(Chainable):可以。
实例:
1 |
|
clearForm()
清除表单元素。该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox)按钮重置为非选定状态。
可链接(Chainable):可以。
1 |
|
clearFields()
清除字段元素。只有部分表单元素需要清除时才方便使用。
可链接(Chainable):可以。
1 |
|
jquery.form表单插件API的参数
ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象,它包含了如下一些属性与值的集合:
target
1 2 |
|
url
1 2 |
|
type
1 2 |
|
beforeSubmit
1 2 3 |
|
success
1 2 |
|
dataType
1 2 3 4 5 |
|
semantic
1 2 3 |
|
resetForm
1 2 |
|
clearForm
1 2 3 4 5 6 7 8 9 10 11 12 |
|
注意:Options对象还可以用来将值传递给jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options,你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。
ajaxForm()适用于以表单提交方式处理ajax技术(需要提供表单的action、id、method,最好在表单中提供submit按钮)它大大简化了使用ajax技术提交表单时的数据传递问题,使用ajaxForm()你不需要逐个的以JavaScript的方式获取每个表单属性的值,并且也不需要在请求路径后面通过url重写的方式传递数据。ajaxForm()会自动收集当前表单中每个属性的值,然后将其以表单提交的方式提交到目标url。这种方式提交数据较安全,并且使用起来更简单,不必写过多冗余的JavaScript代码
1 2 3 4 5 6 7 |
|
ajaxSubmit()适用于以事件的机制以ajax提交form表单(超链接、图片的click事件),该方法作用与ajaxForm()类似,但它更为灵活,因为他依赖于事件机制,只要有事件存在就能使用该方法。你只需指定该form的action属性即可,不需要提供submit按钮。
1 2 3 4 5 6 7 8 |
|
该段代码作用是在表单中id为btn的按钮click事件触发时通过ajaxSubmit()方法以ajax技术提交表单到表单的action所指路径
formSerialize()是将一个form中所有的表单元素以name作为key,value作为值进行序列化操作,这就需要你必须为每一个表单元素设置表单元素name属性及填充表单元素value的值,最好也设置id方便jquery定位表单元素。若要使用此方法你必须设置表单元素name属性及填充表单元素value的值,我在初次使用时就忘了设置name属性,最后在同事的帮助下找了好久才发现此错误。
1 2 3 4 5 |
|
Jquery.form自动提交表单上传图片相关推荐
- 使用jquery.form.js提交表单并获取后台返回值
使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的值提交到后台 1.前台js代码 //使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的 ...
- jquery form自动绑定表单内容
$(#表单).serialize()自动绑定
- form表单下的button不设置type会自动提交表单
有时html页面button点击会出现自动提交表单的情况. 后来查资料得知,form表单下的按钮在没有指定type类型的时候,button会有一个默认的type="submit" ...
- java jquery提交表单数据_[Java教程]jquery实现ajax提交表单信息
[Java教程]jquery实现ajax提交表单信息 0 2016-08-23 15:00:08 最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习 ...
- jQuery使用ajaxSubmit()提交表单示例(转)
这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下: 准备工作: ajaxSubmit(obj)方法是jQuery ...
- jQuery使用ajaxSubmit()提交表单示例
jQuery使用ajaxSubmit()提交表单示例 2014-08-26 07:42 | 9975人阅读 | 来源 ajaxSubmit(obj)方法是jQuery的一个插件jquery.form. ...
- jQuery的ajax提交表单
jQuery的ajax提交表单 1.表单 <form id="ff" method="post"><div class="input ...
- 点击button自动提交表单原因及解决方案
在做登录的时候,需要ajax提交验证,但是发现点击button会自动submit表单,代码如下 <!DOCTYPE html> <html> <head> < ...
- Html:小技巧:自动提交表单的实现方法
Html:小技巧:自动提交表单的实现方法 方法一: <html> <head> <title>Untitled Document</title> (1) ...
最新文章
- docker存储结构解析
- 如何通过网站SEO诊断来做竞争对手的分析?
- Linux下ssh登录速度慢的解决办法
- android udp和tcp区别,UDP模式与TCP模式的区别
- python和excel的结合新软件_Python处理Excel模块的对比分析!
- Linux 基础学习大考核
- 2019/4/17 Linux学习
- 关于opencv读取摄像头的未解之谜
- 【VMCloud云平台】SCCM(八) OSD(一)- 部署准备
- 一开电脑都是广告,请问怎么永久关闭?
- 端口状态 LISTENING、ESTABLISHED、TIME_WAIT、FIN_WAIT_2、CLOSE_WAIT、CLOSE_WAIT
- python 知乎 合并 pdf_32.使用selenium爬取知乎,并实现多页保存为一个PDF文件
- 狂神说Linux学习笔记
- 使用命令启动IOS模拟器
- 超级计算机通信工程研发相关高校,美国签证技巧
- Brief Summary of Bokeh Effect Rendering
- gz rar zip 7z bz2 tgz压缩率比较,以及做一些简单的关于压缩包介绍
- excel打开2个独立窗口_66㎡ 的公寓,竟能安排下 2个卧室和独立马桶间?
- Arduino 使用 旋转编码器
- 告别学习,步入社会【学习网络推广,emmm】