您的位置：首页 > 其它

实现文件上传进度条功能

2018-01-09 16:42 232 查看 
<!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">
//javascript+ajax无刷新方式form表单提交
window.onload = function(){
var fm = document.getElementsByTagName('form')[0];
//表单提交事件
fm.onsubmit = function(evt){
//① 收集用户输入的表单域信息[FormData]
var fd = new FormData(fm);//普通表单域 + 上传文件域信息
//② 并把收集的信息提交给服务器端[ajax]
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
alert(xhr.responseText);
}
}
xhr.upload.onprogress = function(evt){
//该事件每间隔100ms左右就执行一次，
//并可以通过事件对象感知附件信息
//附件已经上传大小
var lod = evt.loaded;
//附件总大小
var tal = evt.total;
//上传百分比
var per = Math.floor((lod/tal)*100) + "%";
//给son的div设置宽度百分比
document.getElementById('son').innerHTML= per;
document.getElementById('son').style.width = per;
}
xhr.open('post','./06.php');
xhr.send(fd);
//阻止浏览器form表单的提交动作
evt.preventDefault();
}
}
</script>
<style type="text/css">
#pat {width:460px; height:40px;border:4px solid blue;}
#son {width:0; height:100%; background-color:lightblue;}
</style>
</head>
<body>
<h2>用户注册(无刷新方式附件上传)</h2>
<form method="post" action="./1001.php">
<p>用户名：<input type="text" id="mingzi" name="username" /></p>
<p>密码：<input type="password" id="mima" name="userpwd" /></p>
<p>邮箱：<input type="text" id="youxiang" name="useremail" /></p>
<div id="pat"><div id="son"></div></div>
<p>头像：<input type="file" id="touxiang" name="userpic" /></p>
<p><input type="submit" value="注册" /></p>
</form>
</body>
</html>
<?php
//收集到：普通表单域信息 +  上传文件域信息
//echo "post:";
//print_r($_POST);
//echo "file:";
//print_r($_FILES);
if($_FILES['userpic']['error']>0){
exit('附件有错误');
}
//附件上传逻辑
$path = "./upload/";
$name = date("YmdHis").'-'.mt_rand(1000,9999);//附件的名字
$name_arr =  explode('.',$_FILES['userpic']['name']);
$ext = ".".$name_arr[count($name_arr)-1]; //附件的后缀

$pathname = $path.$name.$ext;//附件真实路径名

if(move_uploaded_file($_FILES['userpic']['tmp_name'],$pathname)){
echo "success";
}else{
echo "fail";
}



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                ajax
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航