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. 使用Tcmalloc进行堆栈分析

    在前一篇译文<使用TCmalloc的堆栈检查>,介绍了Tcmalloc进行堆栈检查,今天翻译<heap-profiling using tcmalloc>,了解如何 TCmal ...

  2. hadoop如何处理长时间运行不完成的map/reduce 任务?

    如果某一个任务在某个节点上长时间不完成,怎么手动干预来处理这种情况?董西成博客上找到的回答:hadoop中有三种特殊的任务,failed task,killed task和speculative ta ...

  3. cuda并行计算的几种模式

    #include "cuda_runtime.h" #include "device_launch_parameters.h" #include <std ...

  4. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  5. NVIDIA显卡设置

    在玩3D游戏时,因为我的显卡不是特别给力,所以针对性能做出牺牲质量换取性能的调整. 简单设置 简单的方法是,3D设置-通过预览调整图像设置,根据偏重点来设置平衡:性能或者质量. 高级设置 如果你想自行 ...

  6. iOS 中 const static extern 关键字总结

    在看一些高手所写的代码时,总是可以看到我们小白平常不用的关键字,一次,两次,三次,不能总是不明不白,现在总结一下日常开发中常用的关键字的作用: 关键字const/static/extern的释义和用法 ...

  7. redis存在大量脏页问题的追查记录

    from:https://www.zybuluo.com/SailorXiao/note/136014 case现场 线上发现一台机器内存负载很重,top后发现一个redis进程占了大量的内存,TOP ...

  8. cocoapod

    更新代码: sudo gem install -n /usr/local/bin cocoapods --pre ex: The dependency `` is not used in any co ...

  9. mysql中判断记录是否存在方法比较

    我这里总结了判断记录是否存在的常用方法: sql语句:select count(*) from tablename; 然后读取count(*)的值判断记录是否存在.对于这种方法性能上有些浪费,我们只是 ...

  10. chrome升级后LODOP打印插件无法使用

    今天帮朋友使用LODOP实现一个套打程序时,发现LODOP打印插件在chrome下始终无法使用.分析后发现是自己才升级了chrome,chrome新版默认是禁用npapi的,因此需要手动启用一下,启用 ...