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

时间：2022-05-25 19:36:44

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

原理：

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

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

alert(fd);

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

ajax传递表单信息

1.静态显示页面代码

 

 1 <!DOCTYPE html  >
 2 <html>
 3     <head>     
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <script type="text/javascript">
 6         window.onload = function(){
 7             var fm = document.getElementsByTagName('form')[0];
 8             fm.onsubmit = function(){
 9                 //利用FormData实现form表单信息收集
10                 var fd = new FormData(fm);
11                 //fd 内部会把普通表单域 和 上传文件域 的信息都收集
12 
13                 //ajax传递表单信息
14                 var xhr = new XMLHttpRequest();
15                 xhr.onreadystatechange = function(){
16                     if(xhr.readyState==4){
17                         alert(xhr.responseText);
18                     }
19                 }
20                 
21                 //设置监听事件ajax.upload.onprogress
22                 xhr.upload.onprogress = function(evt){
23                     //感知附件上传情况,利用事件对象感知
24                     var loaded = evt.loaded;
25                     var total = evt.total;
26                     var per = Math.floor((loaded/total)*100)+"%";
27 
28                     document.getElementById('son').innerHTML = per;
29                     document.getElementById('son').style.width = per;
30                 }
31                 xhr.open('post','./05.php');
32                 xhr.send(fd);
33 
34                 return false;//组织浏览器提交
35             }
36         }
37         </script>
38 
39         <style type="text/css">
40         #pat {width:430px;height:40px; border:5px solid blue;}
41         #son {width:0;height:100%; background-color:lightblue;}
42         </style>
43     </head>
44     <body>
45         <h2>ajax+FormData实现 无刷新文件上传</h2>
46         <form method="post" action="" >
47             <p>用户名：<input type="text" name="username" /></p>
48             <p>密码：<input type="password" name="password"  /></p>
49             <p>邮箱：<input type="text" name="email"  /></p>
50             <div id="pat"><div id="son"></div></div>
51             <p>头像：<input type="file" name="user_pic" /></p>
52             <p><input type="submit" value="注册" /></p>
53         </form>
54     </body>
55 </html>

2.php页面代码


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

 1 <?php
 2 //$_FILES['user_pic']['error']
 3 //0->ok    1->大小超过php.ini限制    2->大小超过MAX_FILE_SIZE限制    
 4 //3->附件只上传了一部分(不完整)    4->没有上传附件
 5 if($_FILES['user_pic']['error']>0){
 6     exit('上传附件有问题，有可能没有附件');
 7 }
 8 
 9 //服务器保存附件名字为本身名字
10 //本地文件------>上传(php程序处理)------>服务器
11 //本地文件名字的 字符集 gb2312
12 //php程序的 字符集 utf-8--->gb2312
13 //  (在程序里边把utf-8编码的附件名字 转码为 gb2312)
14 //服务器的 字符集 gb2312
15 $name = $_FILES['user_pic']['name'];
16 $name = iconv('UTF-8','GB2312',$name);  //$name的编码由utf-8---变为--->gb2312
17 
18 $path = "./upload/";
19 
20 //附件上传逻辑
21 //move_uploaded_file(临时路径名，真实路径名);
22 if(move_uploaded_file($_FILES['user_pic']['tmp_name'],$path.$name))
23     echo "success";
24 else
25     echo "fail";

 

标签：

相关文章