- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html>
- <head>
- <title></title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="description" content="" />
- <meta name="keywords" content="" />
-
- <script type="text/javascript">
-
- function f1(){
- var mypic = document.getElementById('myhead').files[0];
- var fd = new FormData();
- fd.append("myhead",mypic);
-
- var xhr = new XMLHttpRequest();
- xhr.onreadystatechange = function(){
- if(xhr.readyState==4 && xhr.status==200){
- alert(xhr.responseText);
- }
- }
-
- //侦查当前附件上传情况
- xhr.upload.onprogress = function(evt){
- //侦查附件上传情况
- //通过事件对象侦查
- //该匿名函数表达式大概0.05-0.1秒执行一次
- //console.log(evt);
- //console.log(evt.loaded); //已经上传大小情况
- //evt.total; 附件总大小
- var loaded = evt.loaded;
- var tot = evt.total;
- var per = Math.floor(100*loaded/tot); //已经上传的百分比
- var son = document.getElementById('son');
- son.innerHTML = per+"%";
- son.style.width=per+"%";
- }
-
- xhr.open("post","./04.php");
- xhr.send(fd);
- }
-
- //立刻显示被上传的图片
- function f2(){
- //利用files获得被上传附件(图片)信息
- var mypic = document.getElementById('myhead').files[0];
- //利用mypic获得图像的url地址(二进制源码)
- //URL html5新标准属性
- //window.URL.createObjectURL(mypic);
- document.getElementsByTagName('img')[0].src = window.URL.createObjectURL(mypic);
- }
- </script>
-
- <style type="text/css">
- #parent{width:550px; height:50px; border:5px solid blue;}
- #son {width:0; height:100%; background-color:red; text-align:center; line-height:50px; font-size:20px; font-weight:bold;}
- </style>
- </head>
-
-
- <body>
- <div id="parent"><div id="son"></div></div>
- 用户头像:<input type="file" id="myhead" name="myhead" onchange="f2()"/><br />
- <img src="" alt="" width="200" height="150"/><br />
- <input type="button" value="上传头像" onclick="f1()" /><br />
- </body>
- </html>
-
html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法
/** 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>