带有file标签文件上传的 form ajax提交的方法:jQuery的ajaxSubmit()

这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下、

ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>

那么,如何通过ajaxSubmit(obj)提交数据呢?首先我们需要一个form:

XHTML

<form>
    标题:<input type="text" name="title" /><br />
    内容:<textarea name="content"><textarea/><br />
    <button>提交</button>
</form>

上面是一个需要提交内容的form,通常情况下,我们直接通过form提交的话, 提交后当前页面跳转到form的action所指向的页面。然而,很多时候我们比不希望提交表单后页面跳转,那么,我们就可以使用 ajaxSubmit(obj)来提交数据。使用方法如下所示:

$(‘button‘).on(‘click‘, function() {

$(‘form‘).on(‘submit‘, function() {
        var title = $(‘inpur[name=title]‘).val(),
            content = $(‘textarea‘).val();

$(this).ajaxSubmit({
            type: ‘post‘, // 提交方式 get/post
            url: ‘your url‘, // 需要提交的 url
            data: {
                ‘title‘: title,
                ‘content‘: content
            },
            success: function(data) { // data 保存提交后返回的数据,一般为 json 数据
                // 此处可对 data 作相关处理
                alert(‘提交成功!‘);
            }
            $(this).resetForm(); // 提交后重置表单
        });
        return false; // 阻止表单自动提交事件
    });
});

转自:http://www.jb51.net/article/48728.htm

时间: 2024-10-05 14:57:13

带有file标签文件上传的 form ajax提交的方法:jQuery的ajaxSubmit()的相关文章

html input file标签的上传文件 注意点

文件上传框  代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxlength=“100”> 属性解释: 属性解释: type=“file”定义文件上传框: name属性定义文件上传框的名称,要保证数据的准确采 集,必须定义一个独一无二的名称: size属性定义文件上传框的宽度,单位是单个字符宽度: maxlength属性定义最多输入的字符数. 注意: 要使得文件上载能

Spring Boot文件上传示例(Ajax和REST)

本文介绍如何使用Ajax请求在Spring Boot Web应用程序(REST结构)中上传文件. 本文中使用的工具: Spring Boot 1.4.3.RELEASE Spring 4.3.5.RELEASE Thymeleaf jQuery (webjars) Maven Embedded Tomcat 8.5.6 Google Chrome浏览器 1. 项目结构 一个标准的Maven项目结构.如下图所示 - 2. 项目依赖 声明一个额外的jQuery webjar依赖关系,适用于HTML格

将本地文件上传到指定的服务器(HttpWebRequest方法)

将本地文件上传到指定的服务器(HttpWebRequest方法),通过文件流,带文件名,同文件一同上传的表单文本域及值. 1 ///<summary> 2 /// 将本地文件上传到指定的服务器(HttpWebRequest方法) 3 /// </summary> 4 /// <param name="address">文件上传到的服务器</param> 5 /// <param name="fileNamePath&quo

jQuery File Upload文件上传插件使用

jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示:支持各种动态语言开发的服务器端.官网链接:https://github.com/blueimp/jQuery-File-Upload/wiki 特点:拖放支持:上传进度条:图像预览:可定制和可扩展的:兼容任何服务器端应用平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.). 使用方法: 1

动态input file多文件上传到后台没反应的解决方法!!!

其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传到后台没反应的写法(页面上写死的上传到后台是可以的) 这段代码是写在table>>下的form表单里的 <input type="button" name="button" value="添加附件" onclick="ad

Java中request请求之 - 带文件上传的form表单

常用系统开发中总免不了显示图片,保存一些文件资料等操作. 这些操作的背后,就是程序员最熟悉的 enctype="multipart/form-data"类型的表单. 说起file类型的input,我们往往会遇到问题: 最为常见的就是编码格式-中文乱码.解决中文乱码最好的方式就是我们的项目全部使用 utf-8 格式的国际编码,因为它是可变字节长度的编码,对于占用2字节的中文绰绰有余了.另外就是使用 String s2 = new String(s1.getBytes(“ISO-8859-

文件上传之form表单篇

form表单上传文件 作为本系列的最后一篇,也是楼主知道的第三种文件上传的方式--隆重推出Form表单 这是最传统的上传文件,提交数据的方式 Html: 1 <form action="/home/receive" method="post" enctype="multipart/form-data"> 2 <input type="file" name="f1" id="f1&

ASP中文件上传组件ASPUpload介绍和使用方法

[导读]要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload  要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件,它的下载网址是:           http://www.persits.com/aspupload.exe       组件提供者网址是:           http://www.aspupload.com    

文件上传之伪Ajax篇

iframe上传文件 接上篇:Ajax的最大特点就是无刷新,因此楼主想通过模拟Ajax的方式进行文件上传,也就是iframe上传文件 话不多说,直接上代码 HTML: 1 <iframe name="send" style="display:none"></iframe> 2 3 <form action="/home/receiveAjax/" target="send" method=&quo