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

最新推荐文章于 2022-02-23 09:22:20 发布

sweety_L

最新推荐文章于 2022-02-23 09:22:20 发布

阅读量3.1k

点赞数

分类专栏： HTML5 文章标签： javascript html5 php ajax

本文链接：https://blog.csdn.net/lpprince/article/details/17116707

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

/**
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>

sweety_L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法

/**FormData ==>表单数据能自动把表单数据拼接打包当ajax发送数据时,发送打包的数据;还可以使用FormData对象的append(key,value)添加数据FormData还可以自动帮忙打包文传送件数据,后台通过$_FILES数组接收说明FormData对象既可以打包发送表单的数据,也可以手动append数据注意,input Dom对象有一个files属性(是一
复制链接

扫一扫