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. C++类成员函数的重载、覆盖和隐藏区别？

    C++类成员函数的重载.覆盖和隐藏区别? a.成员函数被重载的特征:(1)相同的范围(在同一个类中):(2)函数名字相同:(3)参数不同:(4)virtual 关键字可有可无.b.覆盖是指派生类函数覆 ...

  2. [转]ANDROID NOTIFICATIONS USING CORDOVA AND IONIC

    本文转自:http://intown.biz/2014/04/11/android-notifications/ ANDROID NOTIFICATIONS USING CORDOVA AND ION ...

  3. codevs1004四子连棋[BFS 哈希]

    1004 四子连棋   时间限制: 1 s   空间限制: 128000 KB   题目等级 : 黄金 Gold   题目描述 Description 在一个4*4的棋盘上摆放了14颗棋子,其中有7颗 ...

  4. KSFramework配置表：扩展表格解析类型

    解析和扩展表格 配置表示例 配置表模块在编译时,把Excel转化成TSV,并根据Excel的头部信息,生成对应的代码: 比如源码库中的Test.xlsx Excel文件,两个列头,Id和Value,其 ...

  5. u3d单词学习plane

    plane n.水平: 平面: 飞机: 木工刨

  6. UBUNTU添加新的分辨率

    首先,直接运行xrandr查看下分辨率的情况: $ xrandr Screen 0: minimum 320 x 200, current 1280 x 1024, maximum 4096 x 40 ...

  7. [No000044]你是否还傻到把最好的留在最后？

    想写这篇文章很久了. 因为一直觉得我们人有一个毛病,总是喜欢将最好的东西留到最后才享用,或者等最后再给别人. 但人们往往忽略了至关重要的一点,就是这个最好有一个保质期.可以说人能拥有的快乐触发点.有机 ...

  8. NOIP2015 运输计划（bzoj4326）

    4326: NOIP2015 运输计划 Time Limit: 30 Sec  Memory Limit: 128 MBSubmit: 886  Solved: 574[Submit][Status] ...

  9. HTML标签用法

    <!DOCTYPE> 声明必须位于 <html> 标签之前.它不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 信息输入标签:in ...

  10. HTML 学习笔记 CSS(选择器2)

    CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 该选择器可以单独使用 也可以和其他元素结合使用 提示 只要适当的 ...