实现无刷新上传文件，使用FormData进行Ajax请求

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了实现无刷新上传文件，使用FormData进行Ajax请求，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
通过传统的form表单提交的方式上传文件：
HTML代码
  1. <formid="uploadForm"action="http://localhost:8080/cfJAX_RS/rest/file/upload"method="post"enctype="multipart/form-data">
  2. <h1>测试通过Rest接口上传文件</h1>
  3. <p>指定文件名：<inputtype="text"name="filename"/></p>
  4. <p>上传文件：<inputtype="file"name="file"/></p>
  5. <p>关键字1：<inputtype="text"name="keyword"/></p>
  6. <p>关键字2：<inputtype="text"name="keyword"/></p>
  7. <p>关键字3：<inputtype="text"name="keyword"/></p>
  8. <inputtype="submit"value="上传"/>
  9. </form>

不过传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用Ajax的方式进行请求的：
Js代码
    $.ajax({
  1. url:"http://localhost:8080/STS/rest/user",
  2. type:"POST",250)"> data:$('#postForm').serialize(),250)"> success:function(data){
  3. $('#serverResponse').html(data);
  4. },250)"> error:function(data){
  5. $('#serverResponse').html(data.status+":"+data.statusText+":"+data.responseText);
  6. }
  7. });

如上，通过$('#postForm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。
但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。
不过如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传了。

FormData是什么呢？我们来看看Mozilla上的介绍。XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

这里只展示一个通过from表单来初始化FormData的方式：
<formenctype="multipart/form-data"method"post"name"fileinfo">
Js代码 varoData=newFormData(document.forms.namedItem("fileinfo"));
  • oData.append("CustomField","Thisissomeextradata");
  • varoReq=newXMLHttpRequest();
  • oReq.open("POST","stash.PHP",true);
  • oReq.onload=function(oEvent){
  • if(oReq.status==200){
  • oOutput.innerHTML="Uploaded!";
  • }else{
  • oOutput.innerHTML="Error"+oReq.status+"occurreduploadingyourfile.<br\/>";
  • };
  • oReq.send(oData);

    • 使用FormData，进行Ajax请求并上传文件：
    HTML代码 <formid="uploadForm">
  • <p>指定文件名：<inputtype="text"name="filename"value=""/></p>
  • <inputtype="button"value="上传"onclick="doUpload()"/>

  • Js代码 functiondoUpload(){
  • varformData=newFormData($("#uploadForm")[0]);
  • url:'http://localhost:8080/cfJAX_RS/rest/file/upload',250)"> type:'POST',250)"> data:formData,250)"> async:false,250)"> cache:false,250)"> contentType:false,250)"> processData:false,250)"> success:function(returndata){
  • alert(returndata);
  • error:function(returndata){
  • });
  • }

    • 猜你在找的Ajax相关文章

    网页的异步请求（Ajax）
    JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
    手动实现AJAX
    AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
    axios异步提交表单数据的不同形式
    踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
    php的ajax简单实例
    很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
    Json与Ajax(注册实例）
    需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
    jSon和Ajax登录功能，ajax数据交互案例
    ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
    关于AjaxControlToolkit的样式问题
    网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
    一个简单的AJAX实现(HELLO AJAX)
    客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
    AJAX中文乱码的两类问题及解决之策
    1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
    实例：AJAX返回xml代码如何在网页中显示
    建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作