首页 > 代码库 > ajax+FormData+javascript实现无刷新表单信息提交
ajax+FormData+javascript实现无刷新表单信息提交
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.onprogress22 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 //本地文件名字的 字符集 gb231212 //php程序的 字符集 utf-8--->gb231213 // (在程序里边把utf-8编码的附件名字 转码为 gb2312)14 //服务器的 字符集 gb231215 $name = $_FILES[‘user_pic‘][‘name‘];16 $name = iconv(‘UTF-8‘,‘GB2312‘,$name); //$name的编码由utf-8---变为--->gb231217 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 else25 echo "fail";
ajax+FormData+javascript实现无刷新表单信息提交
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。