ajax+FormData+javascript实现无刷新表单信息提交

原理：

dom收集表单信息，利用FormData快速收集表单信息  ，实例化表单数据对象 同时收集fm的表单域信息。

var fd = new FormData(fm); //实例化对象

alert(fd);

fd对象内部有收集的form表单域信息

ajax传递表单信息

1.静态显示页面代码

 <!DOCTYPE html  >

 <html>

     <head>

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

         <script type="text/javascript">

         window.onload = function(){

             var fm = document.getElementsByTagName('form')[0];

             fm.onsubmit = function(){

                 //利用FormData实现form表单信息收集

                 var fd = new FormData(fm);

                 //fd 内部会把普通表单域 和 上传文件域 的信息都收集

                 //ajax传递表单信息

                 var xhr = new XMLHttpRequest();

                 xhr.onreadystatechange = function(){

                     if(xhr.readyState==4){

                         alert(xhr.responseText);

                     }

                 }

                 //设置监听事件ajax.upload.onprogress

                 xhr.upload.onprogress = function(evt){

                     //感知附件上传情况,利用事件对象感知

                     var loaded = evt.loaded;

                     var total = evt.total;

                     var per = Math.floor((loaded/total)*100)+"%";

                     document.getElementById('son').innerHTML = per;

                     document.getElementById('son').style.width = per;

                 }

                 xhr.open('post','./05.php');

                 xhr.send(fd);

                 return false;//组织浏览器提交

             }

         }

         </script>

         <style type="text/css">

         #pat {width:430px;height:40px; border:5px solid blue;}

         #son {width:0;height:100%; background-color:lightblue;}

         </style>

     </head>

     <body>

         <h2>ajax+FormData实现 无刷新文件上传</h2>

         <form method="post" action="" >

             <p>用户名：<input type="text" name="username" /></p>

             <p>密码：<input type="password" name="password"  /></p>

             <p>邮箱：<input type="text" name="email"  /></p>

             <div id="pat"><div id="son"></div></div>

             <p>头像：<input type="file" name="user_pic" /></p>

             <p><input type="submit" value="注册" /></p>

         </form>

     </body>

 </html>

2.php页面代码

服务器保存附件名字为本身名字
本地文件------>上传(php程序处理)------>服务器
本地文件名字的 字符集 gb2312
php程序的 字符集 utf-8--->gb2312  (在程序里边把utf-8编码的附件名字 转码为 gb2312)服务器的 字符集 gb2312

 <?php

 //$_FILES['user_pic']['error']

 //0->ok    1->大小超过php.ini限制    2->大小超过MAX_FILE_SIZE限制

 //3->附件只上传了一部分(不完整)    4->没有上传附件

 if($_FILES['user_pic']['error']>0){

     exit('上传附件有问题，有可能没有附件');

 }

 //服务器保存附件名字为本身名字

 //本地文件------>上传(php程序处理)------>服务器

 //本地文件名字的 字符集 gb2312

 //php程序的 字符集 utf-8--->gb2312

 //  (在程序里边把utf-8编码的附件名字 转码为 gb2312)

 //服务器的 字符集 gb2312

 $name = $_FILES['user_pic']['name'];

 $name = iconv('UTF-8','GB2312',$name);  //$name的编码由utf-8---变为--->gb2312

 $path = "./upload/";

 //附件上传逻辑

 //move_uploaded_file(临时路径名，真实路径名);

 if(move_uploaded_file($_FILES['user_pic']['tmp_name'],$path.$name))

     echo "success";

 else

     echo "fail";

ajax+FormData+javascript实现无刷新表单信息提交的更多相关文章

  1. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. ajax+FormData+javascript 实现无刷新上传附件

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  4. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. Ajax 使用formdata 实现 无刷新表单上传

    FormData对象的作用就类似于这里的serialize()方法,不过FormData是浏览器原生的,且支持二进制文件 1.这里实现一个无刷新上传图片,成功后页面显示 点击button 触发隐藏的 ...

  6. js实现无刷新表单提交文件，将ajax请求转换为form请求方法

    最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...

  7. 话说Form标签的target属性-----无刷新表单提交

    国庆前(2013)无聊,就在铁道部的12306上“逛”了下下. PS:原来之所以叫12306,是因为其客服号码是12306,好吧,我很无知…… 首先是被“逛”的页面:票价查询. 之所以去逛,是因为一直 ...

  8. 按下enter键后表单自动提交问题

    在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Aja ...

  9. java web学习总结(十三) -------------------使用Session防止表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

随机推荐

  1. hdu 4960 Another OCD Patient(dp)

    Another OCD Patient Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Ot ...

  2. java设计模式之适配器模式

    说到适配器,我们可能会想到电脑的适配器,没错,其实作用是一样的,电脑的适配器在中国可以使用,在美国也可以使用,它的主要作用是在新接口和老接口之间进行适配..这就是一个适配的过程,适配器模式的类图如下: ...

  3. 图的全局最小割的Stoer-Wagner算法及例题

    Stoer-Wagner算法基本思想:如果能求出图中某两个顶点之间的最小割,更新答案后合并这两个顶点继续求最小割,到最后就得到答案. 算法步骤: --------------------------- ...

  4. Unity arm64

    ERROR ITMS-90086 ERROR ITMS-90086:"missing 64-bit support. beginning on february 1, 2015, new i ...

  5. Quartz集群配置

    先看看quartz的持久化基本介绍: 引用 1 大家都清楚quartz最基本的概念就是job,在job内调用具体service完成具体功能,quartz需要把每个job存储起来,方便调度,quartz ...

  6. HTML 学习笔记(图像)

    HTML 图像 图像标签(<img>)和源属性(Src) 在HTML中,图像由<img>标签定义. <img>是空标签,意思是说,他只包含属性,并且没有闭合标签 要 ...

  7. 用mysql触发器实现log记录

    首先建立两张测试用表 mysql> desc pay; +-------+---------------+------+-----+---------+----------------+ | F ...

  8. PHP-数组函数

    今天在写一个给第三方同步数据的接口时遇到一个这种情况,我有一大坨数据,但是第三方只需要其中的几个而已,不及思索的就开始foreach $ret = array(); foreach ($needPar ...

  9. react拷贝index.html很恶心之解决办法

    https://www.npmjs.com/package/html-webpack-plugin

  10. 51nod lyk与gcd

    1678 lyk与gcd 基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 这天,lyk又和gcd杠上了.它拥有一个n个数的数列,它想实现两种操作. 1:将  ai  ...