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. sed grep find命令

    一.sed [-nerf][n1,n2] action -n 安静模式,只有经过sed处理过的行才显示出来,其他不显示. -r 表示sed支持扩展的正则表达式 -e 表示直接在命令行模式上进行sed操 ...

  2. webkit浏览器常见开发问题

    前段时间有人问我一个简单的问题,html如何创建解析的? 我讲了一大堆,什么通过DocumentLoader, CachedResourceLoader, CacheResource, Resourc ...

  3. 【2016-10-10】【坚持学习】【Day1】【观察者模式】

    今天学习了观察者模式 定义: 一个实体变化会影响其他实体变化 例子: 红绿灯与汽车 红绿灯是观察目标 汽车是实际观察者 灯的变化会影响车是停止还是前进. 例子: 游戏中,一个战队由若干队员组成,当其中 ...

  4. Bash的自动补全

    内置补全命令 Bash内置两个补全命令,分别是compgen和complete.compgen命令根据不同的参数,生成匹配单词的候选补全列表,例子如下: monster@monster-Z:~$ co ...

  5. DPM检测模型 训练自己的数据集 读取接口修改

    (转载请注明作者和出处 楼燚(yì)航的blog :http://www.cnblogs.com/louyihang-loves-baiyan/ 未经允许请勿用于商业用途) 本文主要是针对上一篇基于D ...

  6. C# 格式化小总结

    C#中几个常用的格式化标识符 C或c Currency 货币格式 D或d Decimal 十进制格式(十进制整数,不要和.Net的Decimal数据类型混淆了) E或e Exponent 指数格式 F ...

  7. openjudge1768 最大子矩阵[二维前缀和or递推｜DP]

    总时间限制:  1000ms 内存限制:  65536kB 描述 已知矩阵的大小定义为矩阵中所有元素的和.给定一个矩阵,你的任务是找到最大的非空(大小至少是1 * 1)子矩阵. 比如,如下4 * 4的 ...

  8. AC日记——向量点积计算 openjudge 1.6 09

    09:向量点积计算 总时间限制:  1000ms 内存限制:  65536kB 描述 在线性代数.计算几何中,向量点积是一种十分重要的运算. 给定两个n维向量a=(a1,a2,...,an)和b=(b ...

  9. VS设置程序集属性(文件的详细信息)

    适用范围 本文方法适用于:C#创建的控制台程序,WinForm,WPF等VS创建的.Net工程信息设置. 方法步骤 1.在 项目 上点击鼠标右键选择 属性 ,进入这个页面,点击 程序集信息(重点关注 ...

  10. [No000015]坏习惯一大堆？别怕，还有救-坏习惯一堆，怎么好好学习嘛！