Ajax serialize() 表单进行序列化方式上传文件

通过传统的 form 表单提交的方式上传文件

<form id="uploadForm" action="" method="post" enctype="multipart/form-data"> <p>上传文件:<input type ="file" name="file"/></p> <input type="submit" value="上传"/> </form>

不过传统的 form 表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用 Ajax 的方式进行请求的。

使用 serialize() 对 form 表单进行序列化提交

$.ajax({ url: "", type: "POST", data: $('#uploadForm').serialize(), success: function(data) { }, error: function(data) { } });

如上,通过$('#uploadForm').serialize()可以对 form 表单进行序列化,从而将 form 表单中的所有参数传递到服务端。

但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。不过如今主流浏览器都开始支持一个叫做 FormData 的对象,有了这个对象就可以轻松地使用 Ajax 方式进行文件上传了。

使用 FormData 进行 Ajax 请求并上传文件

<form id="uploadForm"> <p>上传文件:<input type="file" name="file" /></p> <input type="button" value="上传" onclick="upload()" /> </form> function upload() { var formData = new FormData($("#uploadForm")[0]); $.ajax({ url: '', type: 'POST', data: formData, async: false, cache: false, contentType: false, processData: false, success: function(data) { }, error: function(data) { } }); }

以上所述是小编给大家介绍的Ajax serialize() 表单进行序列化方式上传文件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-10-14 14:10:59

Ajax serialize() 表单进行序列化方式上传文件的相关文章

jquery Ajax serialize()表单进行序列化方式上传文件

通过Ajax serialize()表单进行序列化方式上传文件,使用FormData进行Ajax请求 通过传统的form表单提交的方式上传文件:  代码如下 复制代码 <form id= "uploadForm" action= /cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">       <h1 >测试通过Res

asp.net 模拟提交有文件上传的表单(通过http模拟上传文件)_实用技巧

我们暂且不说如何去模拟数据,通过一个简单的form看看当请求发生时,客户端提交了什么样的数据给服务端. 下面是一个简单的html form,两个文本输入框,一个文件上传(这里我选择一张图片),注意有文件上传的form的enctype属性. 复制代码 代码如下: <form action="sql.aspx" method="post" enctype="multipart/form-data"> <input id="

模拟提交有文件上传的表单(通过http模拟上传文件)

通过HTTP模拟GET或POST请求,提交数据到服务端获取响应,比较常见些:但如上传文件到服务端,使用html form当然简单了,而因环境所限有时需要使用模拟方法去提交有附件(文件上传)的表单.我们暂且不说如何去模拟数据,通过一个简单的form看看当请求发生时,客户端提交了什么样的数据给服务端.   下面是一个简单的html form,两个文本输入框,一个文件上传(这里我选择一张图片),注意有文件上传的form的enctype属性. html form 1 <form action="s

通过Ajax方式上传文件使用FormData进行Ajax请求_AJAX相关

通过传统的form表单提交的方式上传文件: Html代码  <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> <h1 >测试通过Rest接口上传文件 </h1> <p >指定文

通过Ajax方式上传文件使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件: Html代码 <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data"> <h1 >测试通过Rest接口上传文件 </h1> <p >指定文件

jQuery Ajax方式上传文件的方法_AJAX相关

jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码: <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传

jQuery Ajax方式上传文件的方法

jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码: <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传

ajax +jsp+iframe无刷新上传文件

  http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16:43首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是不可能的.    而本文实现的文件上传也是无页面刷新的,可以说是一种"类似AJAX"

利用PUT方式上传文件的方法研究

虽然没有POST方法使用广泛,但是PUT方法却是向服务器上传文件最有效率的方法.POST上传文件时,我们通常需要将所有的信息组合成 multipart 传送过去,然后服务器再解码这些信息,解码过程则必不可少的会消耗内存和CPU资源,这种现象在上传大文件时尤其明显.而PUT方法则允许你通过与服务器建立的socket链接传递文件的内容,而不附带其他的信息. 最近一个项目上需要利用这种方式来进行文件的上传,下面介绍一下在 Apache + PHP 的环境下如何进行PUT方式的文件上传. Apache