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.οnlοad=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.οnclick=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.οnlοad=function(){
var btn=document.getElementById('btn');
var file_msg=document.getElementById('file_msg');
var input=document.getElementById('myImg')
input.οnchange=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>来自：http://blog.csdn.net/lpprince/article/details/17116707
类似资料：