ajax上传文件进度条

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function()
{
    var fm=document.getElementsByTagName("form")[0];

    
    fm.onsubmit=function()
    {
    //var username=document.getElementById("username").value;
    // var password=document.getElementById("password").value;
    // var email=document.getElementById("email").value;    
    //var fmdata="username="+username+"&password="+password+"&email="+email;
    
    var fmdata=new FormData(fm);
    
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function()
        {
            if(xhr.readyState==4)
            {
                eval("var obj="+xhr.responseText);
                
               document.getElementById("scjg").innerHTML=obj.jg;
               if(obj.name!=null){
               document.getElementById("sctp").innerHTML='<img src=\"'+obj.name+'\" width="89" height="70"  alt=""/>';}
            }
               
        } 
        
        //设置监听事件ajax.upload.onprogress
        xhr.upload.onprogress=function(evt){
            //感知附件上传情况，利用事件感知
            //console.log(evt);
            var loaded=evt.loaded;
            var total=evt.total;
            var per=Math.floor((loaded/total)*100)+"%";
            document.getElementById("jdn").style.width=per;
            document.getElementById("jdn").innerHTML=per;
            }
        xhr.open("POST","/1.php");
         //使用formData不用设置表头
         //xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          xhr.send(fmdata);
        return false;
    }
        
}
</script>
<style>
#jdw{
    margin:10px;
    height:20px;
    border:solid 1px #666;
    width:200px;}
#jdn{height:20px;
background-color:#F00;
width:0px;
}
 </style>
</head>

<body>
<div id="scjg"></div>
<div id="sctp"></div>
ajax+FormData+javascript 实现无刷新表单注册
<form method="post">
姓名<input name="username" type="text" id="username">
<br>
密码<input name="password" type="password" id="password">
<br>
邮箱<input name="email" type="text" id="email">
<br>
<div id="jdw"><div id="jdn"></div></div>
文件<input name="nfile" type="file" id="nfile">
<br>
<input type="submit" value="提交"></form>
</body>
</html>

<?php
//print_r($_POST);
//print_r($_FILES);
$ary=array();
if($_FILES["nfile"]["error"]>0){
$ary['jg']='上传附件有问题，有可能没有附件';    
echo json_encode($ary);
exit();
}


$path="./upfile/";

$name=$_FILES["nfile"]['name'];
//附件上传
if(move_uploaded_file($_FILES["nfile"]['tmp_name'],iconv("UTF-8","GBK",$path.$name)))
{
$ary['jg']="上传成功";
$ary['name']=$path.$name;
}else{
$ary['jg']="上传失败";
}
echo json_encode($ary);


?>

秒客网

ajax上传文件进度条

相关文章