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. 网页中显示pdf

    1.<embed width="800" height="600" src="test_pdf.pdf"> </embed ...

  2. CDN下nginx获取用户真实IP地址

    随着nginx的迅速崛起,越来越多公司将apache更换成nginx. 同时也越来越多人使用nginx作为负载均衡, 并且代理前面可能还加上了CDN加速,但是随之也遇到一个问题:nginx如何获取用户 ...

  3. [转]pyhon之Tkinter实例化学习

    本文转自:http://www.cnblogs.com/kaituorensheng/p/3287652.html 阅读目录 1. 产品介绍 2. 设计规划 3. 相关知识 4. 源码附件 Tkint ...

  4. laravel administrator 一款通用的后台插件（PHP框架扩展）

    前几天我看了一下zend framework 2的一些官方文档,也找了一些例子,可惜所有的资料少之甚少.于是我就开始去找这国外用的比较流行的PHP框架laravel,希望能够找到其合适的例子,而且我本 ...

  5. 如何用ZBrush做人体造型雕刻

    之前我们用ZBrush®中的Curves和Insert笔刷快速创建模型的躯干.四肢以及手指.经过老师耐心的讲解我们也收获了很多,知道了创建模型的流程和雕刻技巧.今天的ZBrush教程将结合一些新的雕刻 ...

  6. 转: rapidJSON与jsoncpp语法说明

    转:  http://www.voidcn.com/blog/hudejun007/article/p-1811986.html

  7. Js经典相册

    Js经典相册 点击下载

  8. 3098: Hash Killer II

    3098: Hash Killer II Time Limit: 5 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 1219  Solved:  ...

  9. usb驱动开发23之驱动生命线

    关于字符串描述符的地位仅次于设备/配置/接口/端点四大描述符,那四大设备必须得支持,而字符串描述符对设备来说则是可选的,这并不是就说字符串描述符不重要,对咱们来说,提供字符串描述符的设备要比没有提供的 ...

  10. SharePoint 2013无代码实现列表视图的时间段动态筛选

    本文介绍两种为列表视图设置时间段筛选器的方法.其中,第一个方法用于SharePoint Server,第二个方法同时还能用于SharePoint Foundation. 方法一:日期筛选器Web部件 ...