首页 > 代码库 > html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

2024-08-18 17:09:52   217人阅读

/**
FormData =http://www.mamicode.com/=>表单数据><!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>

 

html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)


联系
我们