ajax利用html5新特性带进度条上传文件 html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法

最新推荐文章于 2023-02-17 00:38:31 发布

烟花易冷繁华落

最新推荐文章于 2023-02-17 00:38:31 发布

阅读量322

点赞数

分类专栏： javascript 文章标签： ajax

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>

烟花易冷繁华落

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax利用html5新特性带进度条上传文件 html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法

> html> head> title>title> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> meta name="description" content="" /> meta name="k
复制链接

扫一扫

专栏目录