formData的实现

参考:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Sending forms with pure AJAX &ndash; MDN</title>

<script type="text/javascript">

"use strict";

/*\

|*|

|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::

|*|

|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()

\*/

if (!XMLHttpRequest.prototype.sendAsBinary) {

  XMLHttpRequest.prototype.sendAsBinary = function(sData) {

    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);

    for (var nIdx = 0; nIdx < nBytes; nIdx++) {

      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;

    }

    /* send as ArrayBufferView...: */

    this.send(ui8Data);

    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */

  };

}

/*\

|*|

|*|  :: AJAX Form Submit Framework ::

|*|

|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest

|*|

|*|  This framework is released under the GNU Public License, version 3 or later.

|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html

|*|

|*|  Syntax:

|*|

|*|   AJAXSubmit(HTMLFormElement);

\*/

var AJAXSubmit = (function () {

  function ajaxSuccess () {

    /* console.log("AJAXSubmit - Success!"); */

    console.log(this.responseText);

    /* you can get the serialized data through the "submittedData" custom property: */

    /* console.log(JSON.stringify(this.submittedData)); */

  }

  function submitData (oData) {

    /* the AJAX request... */

    var oAjaxReq = new XMLHttpRequest();

    oAjaxReq.submittedData = oData;

    oAjaxReq.onload = ajaxSuccess;

    if (oData.technique === 0) {

      /* method is GET */

      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);

      oAjaxReq.send(null);

    } else {

      /* method is POST */

      oAjaxReq.open("post", oData.receiver, true);

      if (oData.technique === 3) {

        /* enctype is multipart/form-data */

        var sBoundary = "---------------------------" + Date.now().toString(16);

        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);

        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");

      } else {

        /* enctype is application/x-www-form-urlencoded or text/plain */

        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);

        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));

      }

    }

  }

  function processStatus (oData) {

    if (oData.status > 0) { return; }

    /* the form is now totally serialized! do something before sending it to the server... */

    /* doSomething(oData); */

    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */

    submitData (oData);

  }

  function pushSegment (oFREvt) {

    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";

    this.owner.status--;

    processStatus(this.owner);

  }

  function plainEscape (sText) {

    /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */

    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */

    return sText.replace(/[\s\=\\]/g, "\\$&");

  }

  function SubmitRequest (oTarget) {

    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";

    /* console.log("AJAXSubmit - Serializing form..."); */

    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";

    this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;

    this.receiver = oTarget.action;

    this.status = 0;

    this.segments = [];

    var fFilter = this.technique === 2 ? plainEscape : escape;

    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {

      oField = oTarget.elements[nItem];

      if (!oField.hasAttribute("name")) { continue; }

      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";

      if (sFieldType === "FILE" && oField.files.length > 0) {

        if (this.technique === 3) {

          /* enctype is multipart/form-data */

          for (nFile = 0; nFile < oField.files.length; nFile++) {

            oFile = oField.files[nFile];

            oSegmReq = new FileReader();

            /* (custom properties:) */

            oSegmReq.segmentIdx = this.segments.length;

            oSegmReq.owner = this;

            /* (end of custom properties) */

            oSegmReq.onload = pushSegment;

            this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");

            this.status++;

            oSegmReq.readAsBinaryString(oFile);

          }

        } else {

          /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */

          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));

        }

      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {

        /* field type is not FILE or is FILE but is empty */

        this.segments.push(

          this.technique === 3 ? /* enctype is multipart/form-data */

            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"

          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */

            fFilter(oField.name) + "=" + fFilter(oField.value)

        );

      }

    }

    processStatus(this);

  }

  return function (oFormElement) {

    if (!oFormElement.action) { return; }

    new SubmitRequest(oFormElement);

  };

})();

</script>

</head>

<body>

<h1>Sending forms with pure AJAX</h1>

<h2>Using the GET method</h2>

<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">

  <fieldset>

    <legend>Registration example</legend>

    <p>

      First name: <input type="text" name="firstname" /><br />

      Last name: <input type="text" name="lastname" />

    </p>

    <p>

      <input type="submit" value="Submit" />

    </p>

  </fieldset>

</form>

<h2>Using the POST method</h2>

<h3>Enctype: application/x-www-form-urlencoded (default)</h3>

<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">

  <fieldset>

    <legend>Registration example</legend>

    <p>

      First name: <input type="text" name="firstname" /><br />

      Last name: <input type="text" name="lastname" />

    </p>

    <p>

      <input type="submit" value="Submit" />

    </p>

  </fieldset>

</form>

<h3>Enctype: text/plain</h3>

<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">

  <fieldset>

    <legend>Registration example</legend>

    <p>

      Your name: <input type="text" name="user" />

    </p>

    <p>

      Your message:<br />

      <textarea name="message" cols="40" rows="8"></textarea>

    </p>

    <p>

      <input type="submit" value="Submit" />

    </p>

  </fieldset>

</form>

<h3>Enctype: multipart/form-data</h3>

<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">

  <fieldset>

    <legend>Upload example</legend>

    <p>

      First name: <input type="text" name="firstname" /><br />

      Last name: <input type="text" name="lastname" /><br />

      Sex:

      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>

      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />

      Password: <input type="password" name="secret" /><br />

      What do you prefer:

      <select name="image_type">

        <option>Books</option>

        <option>Cinema</option>

        <option>TV</option>

      </select>

    </p>

    <p>

      Post your photos:

      <input type="file" multiple name="photos[]">

    </p>

    <p>

      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />

      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>

    </p>

    <p>

      Describe yourself:<br />

      <textarea name="description" cols="50" rows="8"></textarea>

    </p>

    <p>

      <input type="submit" value="Submit" />

    </p>

  </fieldset>

</form>

</body>

</html>

formData的实现的更多相关文章

三种上传文件不刷新页面的方法讨论：iframe/FormData/FileReader
发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...
form表单中enctype="multipart/form-data"的作用
在我们使用php导入和导出excel表格的时候经常会见到 enctype="multipart/form-data",哪他的作用是什么呢? ENCTYPE="multip ...
通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
multipart/form-data和application/x-www-form-urlencoded的区别
在Form元素的语法中,EncType表明提交数据的格式用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urle ...
H5 FormData对象的使用
XMLHttpRequest Level2 添加了一个新的接口--FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用F ...
form表单编码方式设置为multipart/form-data，后台参数出现乱码情况
一般在上传图片过程中,form中的编码方式一般采用multipart/form-data方式编码,但是后台这取参数时,可能会出现乱码情况:这里后台要采用转换编码方式: 页面: 后台:获取表单元素时,
jquery 通过ajax FormData 对象上传附件
之前上传附件都是用插件,或者用form表单体检(这个是很久以前的方式了),今天突发奇想,自己来实现附件上传,具体实现如下 html: <div> 流程图: <input id=& ...
html5 formData上传针对app端
function uploadFile() { if ((document.getElementById("file").files[0].size / 1024).toFixed ...
H5的FormData对象完成ajax上传文件multiFile
最近工作中需要完成,ajax上传图片,可是input file +ajax是无法完成的: 于是寻找了许久,发现了H5 的一个对象FormData 使用方法如下: HTML: <form id=& ...
formData上传图片
---------------------formData上传图片--------------------- <form id="imageform"> <img ...

随机推荐

js的处理技巧
目前来说,处理js有两种方法: 1,通过第三方工具执行js脚本, selenium,会驱动浏览器把js全部加载出来并返回. 2,手动模拟js的执行 2.1)找到js链接,可以在idle中用print( ...
元组tuple插入字符串的方式
元组无法更改,但是可以用切片的方式将头尾切出,中间'+'字符串,后整体赋值原先的元组,举例如下 >>> temp=('东邪','西毒' ,'南帝') >>> tem ...
if else if，switch case二者的联系与区别
前段时间在学习中听到了一个关于条件判断语句的问题,分析if else if语句和switch case语句这两者之间的联系和区别,从而使用其中最有效率的一种方法. 一.if...else if if. ...
Scriplet的三种代码
Jsp中注释分为显示注释和隐式注释, 显示注释 -- 可以通过查看源代码看到  隐式注释 -- 源代码中看不到 <%--jsp注释---%> & ...
以技术面试官的经验分享毕业生和初级程序员通过面试的技巧（Java后端方向）
本来想分享毕业生和初级程序员如何进大公司的经验,但后来一想,人各有志,有程序员或许想进成长型或创业型公司或其它类型的公司,所以就干脆来分享些提升技能和通过面试的技巧,技巧我讲,公司你选,两厢便利. 毕 ...
hibernate--hibernate.cfg.xml常用配置详解
在hibernate中最重要的两个配置文件就是hibernate.cfg.xml和xxx.hbm.xml文件,前者是一些配置信息,后者是配置表和对象的映射关系,可以通过注解的方式来取代. 本篇文章主要 ...
[Codeforces 933B]A Determined Cleanup
Description 题库链接给你两个正整数 \(p,k\) ,询问是否能够构造多项式 \(f(x)=\sum\limits_{i=0}^{d-1}a_ix^i\) ,使得存在多项式 \(q(x) ...
计蒜客NOIP模拟赛4 D1T1 小X的质数
小 X 是一位热爱数学的男孩子,在茫茫的数字中,他对质数更有一种独特的情感.小 X 认为,质数是一切自然数起源的地方. 在小 X 的认知里,质数是除了本身和 1以外,没有其他因数的数字. 但由于小 X ...
●BZOJ 2752 [HAOI2012]高速公路(road)
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=2752题解: 期望,线段树. 把每个路段看成一个点,那么对于l~R的操作,就可以转化为对l~r ...
【BZOJ4653】【Noi2016D2】区间
原题传送门 Description 在数轴上有 n个闭区间 [l1,r1],[l2,r2],...,[ln,rn].现在要从中选出 m 个区间,使得这 m个区间共同包含至少一个位置.换句话说,就是使得 ...

formData的实现

formData的实现的更多相关文章

随机推荐

热门专题