/** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormData还可以自动帮忙打包文传送件数据,后台通过$_FILES数组接收 说明FormData对象既可以打包发送表单的数据,也可以手动append数据 注意,input Dom对象有一个files属性 十一哥文件数组 **/ <!doctype html> <html> <head> <meta charset=utf-8> <head> <title>FromData</title> </head> <script> window.onload=function(){ function _ajax(data,url,method){ var xml=new XMLHttpRequest(); xml.open(method,url,true); xml.onreadystatechange=function(){ if(this.readyState==4){ alert(this.responseText); } } xml.send(data); } function send_form(){ var myform=document.getElementById('myform'); //这行代码FormData对象帮忙把数据打包了; var _formData=new FormData(myform); var myImg=document.getElementById('myImg').files[0]; alert(myImg); _formData.append('sex','man'); _formData.append('like','basketball'); //直接把_formData对象传给XMLHttpRequest对象的send()方法 _ajax(_formData,'./accept.php','post') } var btn=document.getElementById('btn'); btn.onclick=function(){ send_form(); } } </script> <body> <form id='myform'> 姓名:<input type='text' name='name'/><br/> 城市:<input type='text' name='city'/><br/> 密码:<input type='password' name='password'/><br/> <input type='file' name='myImg' id='myImg'/><br/> <input type='button' value='确认' id='btn'/> </form> </body> </html> ============================= //后台接收到的数据 Array ( [name] => lpprince [city] => qingyuan [password] => 123 [sex] => man [like] => basketball ) Array ( [myImg1] => Array ( [name] => xiao1.jpg [type] => image/jpeg [tmp_name] => /Applications/XAMPP/xamppfiles/temp/php0AjbuQ [error] => 0 [size] => 13039 ) [myImg2] => Array ( [name] => xiao.c [type] => application/octet-stream [tmp_name] => /Applications/XAMPP/xamppfiles/temp/phpMprmQq [error] => 0 [size] => 49 ) )
input的file属性以及window.URL.createObjectURL( ) 方法
<!doctype html> <html> <head> <meta charset=utf-8> <head> <title>FromData</title> </head> <script> window.onload=function(){ var btn=document.getElementById('btn'); var file_msg=document.getElementById('file_msg'); var input=document.getElementById('myImg') input.onchange=function(){ /* input 有files属性,该属性是一个数组,保存了图片的信息 name=>L.png lastModifiedDate=>Mon Nov 11 2013 13:38:31 GMT+0800 (CST) size=>54546 type=>image/png webkitSlice=>function webkitSlice() { [native code] } */ var myImg=document.getElementById('myImg').files[0]; var pic=document.createElement('img'); //把二进制对象读成浏览器能够识别的对象; //Safari竟然不支持URL.createObjectURL()方法,Chrome支持 pic.src=window.URL.createObjectURL(myImg); pic.style.width='100px'; pic.style.height='100px'; file_msg.innerHTML="文件的大小是"+parseInt(myImg.size)+'M'+'<br/>'+'图片的名字是:'+myImg.name; document.body.appendChild(pic); } } </script> <style> #file_msg{ width:150px; height:150px; border:1px solid green; } </style> <body> <form id='myform'> <div id='file_msg'></div> <input type='file' name='myImg1' id='myImg'/><br/> <input type='button' value='确认' id='btn'/> </form> </body> </html>