通过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 >指定文件名： <input type ="text" name="filename" /></p>
   <p >上传文件： <input type ="file" name="file" /></p>
   <p >关键字1： <input type ="text" name="keyword" /></p>
   <p >关键字2： <input type ="text" name="keyword" /></p>
   <p >关键字3： <input type ="text" name="keyword" /></p>
   <input type ="submit" value="上传"/>
</form>

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

Js代码  

$.ajax({
   url : "http://localhost:8080/STS/rest/user",
   type : "POST",
   data : $( '#postForm').serialize(),
   success : function(data) {
     $( '#serverResponse').html(data);
   },
   error : function(data) {
     $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
   }
});

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

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

关于FormData及其用法

FormData是什么呢？我们来看看Mozilla上的介绍。

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

参见：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData

这里只展示一个通过from表单来初始化FormData的方式

<form enctype="multipart/form-data" method="post" name="fileinfo">

Js代码  

var oData = new FormData(document.forms.namedItem("fileinfo" ));
oData.append( "CustomField", "This is some extra data" );
var oReq = new XMLHttpRequest();
oReq.open( "POST", "stash.php" , true );
oReq.onload = function(oEvent) {
   if (oReq.status == 200) {
     oOutput.innerHTML = "Uploaded!" ;
   } else {
     oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
   }
};
oReq.send(oData);

参见：https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

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

这里使用JQuery，但是老版本的JQuery比如1.2是不支持的，最好使用2.0或更新版本：

Html代码  

<form id= "uploadForm">
   <p >指定文件名： <input type="text" name="filename" value= ""/></p >
   <p >上传文件： <input type="file" name="file"/></ p>
   <input type="button" value="上传" onclick="doUpload()" />
</form>

Js代码  

function doUpload() {
   var formData = new FormData($( "#uploadForm" )[0]);
   $.ajax({
     url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
     type: 'POST',
     data: formData,
     async: false,
     cache: false,
     contentType: false,
     processData: false,
     success: function (returndata) {
       alert(returndata);
     },
     error: function (returndata) {
       alert(returndata);
     }
   });
}

以上所述是小编给大家介绍的通过Ajax方式上传文件使用FormData进行Ajax请求的全部叙述，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • jQuery Ajax使用FormData上传文件和其他数据后端web.py获取

    XMLHttpRequest Level 2 添加了一个新的接口--FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form enctype="multipart/form-data"> <input type="file" na

  • vuejs使用FormData实现ajax上传图片文件

    vuejs使用FormData实现ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生.接下来就以一个简单的头像上传来说明如何使用. 效果图 前端实现 <template> <div class="admin"> <d

  • 基于Ajax的formData图片和数据上传

    最近做一个项目,关于用户数据和表单上传的项目,碰到了不少坑,这里总结的分享给大家,希望能够帮助大家.(小白,欢迎大家多交流) 多的就不说了,直接来代码吧!! 1.上传组件 说明一下,项目是基于vue框架的 <template> <div class="newproduct"> <div class="topbox"> <div class="shopbox"> <img class="

  • 通过Ajax使用FormData对象无刷新上传文件方法

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比较敏感的网站慎用. 在工作中遇到了一个问题:在一个页面中,有4块内容,每块内容都包含一个图片上传功能,希望可以实现一键把这四块内容都上传上去. 我没有用插件实现上传功能,就是用的input[type=file],因此就遇到一个问题就是: ①传统的form表单会导致页面刷新,无法实现上述功能 ②把表单

  • jQuery的ajax中使用FormData实现页面无刷新上传功能

    jQuery的ajax中使用FormData实现页面无刷新上传功能

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

  • FormData+Ajax实现上传进度监控

    什么是FormData? FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同: 如何创建一个FormData对象 你可以自己创建一个FormData对象,然后通过调用它的append()方法添加字段,就像这样: //实例化一个formData对象 var

  • jQuery Ajax使用FormData对象上传文件的方法

    jQuery Ajax使用FormData对象上传文件的方法

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明. 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件. 使用<form>表单初始化FormData对象方式上传文件 HTM

  • 通过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方式上传文件的方法

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

  • 解决Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"

    今天使用ajax上传文件时,出现了错误.数据传输的方式是通过定义formData完成的,提交的文件对象也设置为dom对象,但是还是不能发送请求.F12看到后台报了个错误:Uncaught TypeError: Illegal invocation,百度了一下,找到了解决方法. 解决方法:在ajax请求的参数中添加如下两个参数: $.ajax({ ..., processData: false, contentType: false, ... }); processData 类型:Boolean

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

    通过传统的 form 表单提交的方式上传文件 <form id="uploadForm" action="" method="post" enctype="multipart/form-data"> <p>上传文件:<input type ="file" name="file"/></p> <input type="subm

  • Ajax异步上传文件实例代码分享

    非常不多说,直接给大家上干货,写的不好还请见谅. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <title>Ind

  • 基于jQuery Ajax实现上传文件

    本文实例为大家分享了基于jQuery Ajax实现上传文件的关键代码,供大家参考,具体内容如下 JS代码: //保存 function btnAdd() { var formData = new FormData($("#frm")[0]); $.ajax({ url: "/Admin/ContentManage/SaveEdit", type: "POST", data: formData, contentType: false, //必须fa

  • PHP+Ajax实现上传文件进度条动态显示进度功能

    PHP+Ajax实现上传文件进度条动态显示进度功能

    说个前提:PHP配置文件中规定默认上传文件大小限制2M以下,如需上传大文件需同时更改php.ini中的upload_max_filesize和max_execution_time以及post_max_size的值. 主界面以及Ajax实现:index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传文件

  • Java使用Ajax异步上传文件

    相关代码示例: html代码片段: <form class="layui-form" action="#" id="uploadForm"> <div class="layui-form-item"> <label class="layui-form-label">名称</label> <div class="layui-input-block

  • 使用AJAX实现上传文件

    本文实例为大家分享了使用AJAX实现上传文件的具体代码,供大家参考,具体内容如下 需求: 在前端页面选择文件上传到服务器的指定位置 前端代码 <form id="uploadForm" method="post" enctype="multipart/form-data"> <label >上传电子书</label> <input type="file" name="file

  • java使用ajax完成上传文件

    本文实例为大家分享了java使用ajax完成上传文件的具体代码,供大家参考,具体内容如下 使用ajax上传文件最重要的就是实例化FormData来进行上传文件: 1.html代码: <div class="kuang">     <p>文件上传</p>     <div class="san3">         <input type="file" name="fujianID&q

随机推荐