首页前端开发HTMLHTML5文件上传还有进度条

HTML5文件上传还有进度条

时间2024-01-25 11:02:41发布访客分类HTML浏览499
导读：收集整理的这篇文章主要介绍了html5教程-HTML5文件上传还有进度条，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 以下是自学IT网--中级...
收集整理的这篇文章主要介绍了html5教程-HTML5文件上传还有进度条，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

 以下是自学IT网--中级班上课笔记

            网址：www.zixue.it

 

需要在chrome,ff,IE10下运行


htML页面


[html]
!DOCTYPE html>  
html lang="zh-CN">  
head>  
title> HTML5 文件上传进度条/title>  
meta charset="utf-8" />  
meta name="description" content="" />  
meta name="keywords" content="" />  
script type="text/javascript">  
/* 
想得到传送文件的进度条 
1:要能把文件内容打包并发送  FormData对象 
2: 发送过程中,要能不断检测 已发送/全部 PRogress.onprogress 
*/ 
 
/script>  
style type="text/css">  
#progress{  
border: 1px solid blue;  
width:500px;  
height:20px;  
}  
 
#bar {  
background:green;  
height:20px;  
width:0%;  
}  
 
/style>  
/head>  
    body>  
        h1> 在chrome,ff,IE10运行/h1>  
        form>  
            input type="file" name="pic" /> br />  
        /form>  
        p id="progress"> p id="bar"> /p> /p>  
    /body>  
    script>  
        // 负责ajax发送数据 
        function up(fd) {  
            VAR xhr = new XMLHttpRequest();  
            xhr.open('POST','upfile.php',true); // 异步传输 
 
            // xhr.upload 这是html5新增的api,储存了上传过程中的信息 
            xhr.upload.onprogress = function (ev) {  
                var percent = 0;  
                if(ev.lengthComputable) {  
                    percent = 100 * ev.loaded/ev.total;  
                    //document.getElementById('progress').innerHTML = percent;  
                    document.getElementById('bar').style.width = percent + '%';  
                }  
            }  
 
            xhr.send(fd);  
        }  
 
 
        document.getelementsbytagname('input')[0].onchange = function() {  
            //alert('你选择文件了');  
            //alert(this.files[0]); // 文件对象,html5新增的api 
 
            var fd = new FormData(); // html5新增的对象,可以包装字符,二进制信息 
            fd.append(this.name,this.files[0]);  
 
            up(fd);  
 
        }  
    /script>  
/html>  

!DOCTYPE html>
html lang="zh-CN">
head>
title> HTML5 文件上传进度条/title>
meta charset="utf-8" />
meta name="description" content="" />
meta name="keywords" content="" />
script type="text/javascript">
/*
想得到传送文件的进度条
1:要能把文件内容打包并发送  FormData对象
2: 发送过程中,要能不断检测 已发送/全部 progress.onprogress
*/

/script>
style type="text/css">
#progress{
border: 1px solid blue;
width:500px;
height:20px;
}

#bar {
background:green;
height:20px;
width:0%;
}

/style>
/head>
    body>
        h1> 在chrome,ff,IE10运行/h1>
        form>
            input type="file" name="pic" /> br />
        /form>
        p id="progress"> p id="bar"> /p> /p>
    /body>
    script>
        // 负责ajax发送数据
        function up(fd) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST','upfile.php',true); // 异步传输

            // xhr.upload 这是html5新增的api,储存了上传过程中的信息
            xhr.upload.onprogress = function (ev) {
                var percent = 0;
                if(ev.lengthComputable) {
                    percent = 100 * ev.loaded/ev.total;
                    //document.getElementById('progress').innerHTML = percent;
                    document.getElementById('bar').style.width = percent + '%';
                }
            }

            xhr.send(fd);
        }


        document.getElementsByTagName('input')[0].onchange = function() {
            //alert('你选择文件了');
            //alert(this.files[0]); // 文件对象,html5新增的api

            var fd = new FormData(); // html5新增的对象,可以包装字符,二进制信息
            fd.append(this.name,this.files[0]);

            up(fd);

        }
    /script>
/html>
upfile.php页面


[php]
echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';  

echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';

 

如图所示：

 

 


 以下是自学it网--中级班上课笔记

            网址：www.zixue.it

 

需要在chrome,ff,IE10下运行


html页面


[html]
!DOCTYPE html>  
html lang="zh-CN">  
head>  
title> HTML5 文件上传进度条/title>  
meta charset="utf-8" />  
meta name="description" content="" />  
meta name="keywords" content="" />  
script type="text/javascript">  
/* 
想得到传送文件的进度条 
1:要能把文件内容打包并发送  FormData对象 
2: 发送过程中,要能不断检测 已发送/全部 progress.onprogress 
*/ 
 
/script>  
style type="text/css">  
#progress{  
border: 1px solid blue;  
width:500px;  
height:20px;  
}  
 
#bar {  
background:green;  
height:20px;  
width:0%;  
}  
 
/style>  
/head>  
    body>  
        h1> 在chrome,ff,IE10运行/h1>  
        form>  
            input type="file" name="pic" /> br />  
        /form>  
        p id="progress"> p id="bar"> /p> /p>  
    /body>  
    script>  
        // 负责ajax发送数据 
        function up(fd) {  
            var xhr = new XMLHttpRequest();  
            xhr.open('POST','upfile.php',true); // 异步传输 
 
            // xhr.upload 这是html5新增的api,储存了上传过程中的信息 
            xhr.upload.onprogress = function (ev) {  
                var percent = 0;  
                if(ev.lengthComputable) {  
                    percent = 100 * ev.loaded/ev.total;  
                    //document.getElementById('progress').innerHTML = percent;  
                    document.getElementById('bar').style.width = percent + '%';  
                }  
            }  
 
            xhr.send(fd);  
        }  
 
 
        document.getElementsByTagName('input')[0].onchange = function() {  
            //alert('你选择文件了');  
            //alert(this.files[0]); // 文件对象,html5新增的api 
 
            var fd = new FormData(); // html5新增的对象,可以包装字符,二进制信息 
            fd.append(this.name,this.files[0]);  
 
            up(fd);  
 
        }  
    /script>  
/html>  

!DOCTYPE html>
html lang="zh-CN">
head>
title> HTML5 文件上传进度条/title>
meta charset="utf-8" />
meta name="description" content="" />
meta name="keywords" content="" />
script type="text/javascript">
/*
想得到传送文件的进度条
1:要能把文件内容打包并发送  FormData对象
2: 发送过程中,要能不断检测 已发送/全部 progress.onprogress
*/

/script>
style type="text/css">
#progress{
border: 1px solid blue;
width:500px;
height:20px;
}

#bar {
background:green;
height:20px;
width:0%;
}

/style>
/head>
    body>
        h1> 在chrome,ff,IE10运行/h1>
        form>
            input type="file" name="pic" /> br />
        /form>
        p id="progress"> p id="bar"> /p> /p>
    /body>
    script>
        // 负责ajax发送数据
        function up(fd) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST','upfile.php',true); // 异步传输

            // xhr.upload 这是html5新增的api,储存了上传过程中的信息
            xhr.upload.onprogress = function (ev) {
                var percent = 0;
                if(ev.lengthComputable) {
                    percent = 100 * ev.loaded/ev.total;
                    //document.getElementById('progress').innerHTML = percent;
                    document.getElementById('bar').style.width = percent + '%';
                }
            }

            xhr.send(fd);
        }


        document.getElementsByTagName('input')[0].onchange = function() {
            //alert('你选择文件了');
            //alert(this.files[0]); // 文件对象,html5新增的api

            var fd = new FormData(); // html5新增的对象,可以包装字符,二进制信息
            fd.append(this.name,this.files[0]);

            up(fd);

        }
    /script>
/html>
upfile.php页面


[php]
echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';  

echo move_uploaded_file($_FILES['pic']['tmp_name'],'./upload/' . $_FILES['pic']['name']) ? 'OK':'fail';

 

如图所示：

 

 


觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

AJAXAPICSSdivHTMLhtml5post-format-gallerythis

若转载请注明出处： HTML5文件上传还有进度条
本文地址： https://pptw.com/jishu/586445.html
WPF制作窗口的启动和关闭动画 html5离线存储

游客 回复需填写必要信息
↑