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";
时间： 2024-08-01 10:26:22