实现文件上传进度条功能
生活随笔
收集整理的這篇文章主要介紹了
实现文件上传进度条功能
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>新建網(wǎng)頁(yè)</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無(wú)刷新方式form表單提交window.onload = function(){var fm = document.getElementsByTagName('form')[0];//表單提交事件fm.onsubmit = function(evt){//① 收集用戶輸入的表單域信息[FormData]var fd = new FormData(fm);//普通表單域 + 上傳文件域信息//② 并把收集的信息提交給服務(wù)器端[ajax]var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState==4){alert(xhr.responseText);}}xhr.upload.onprogress = function(evt){//該事件每間隔100ms左右就執(zhí)行一次，//并可以通過(guò)事件對(duì)象感知附件信息//附件已經(jīng)上傳大小var lod = evt.loaded;//附件總大小var tal = evt.total;//上傳百分比var per = Math.floor((lod/tal)*100) + "%";//給son的div設(shè)置寬度百分比document.getElementById('son').innerHTML= per;document.getElementById('son').style.width = per;}xhr.open('post','./06.php');xhr.send(fd);//阻止瀏覽器form表單的提交動(dòng)作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>用戶注冊(cè)(無(wú)刷新方式附件上傳)</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="注冊(cè)" /></p></form></body>
</html>
<?php
//收集到：普通表單域信息 + 上傳文件域信息
//echo "post:";
//print_r($_POST);
//echo "file:";
//print_r($_FILES);
if($_FILES['userpic']['error']>0){exit('附件有錯(cuò)誤');
}
//附件上傳邏輯
$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;//附件真實(shí)路徑名if(move_uploaded_file($_FILES['userpic']['tmp_name'],$pathname)){echo "success";
}else{echo "fail";
}
總結(jié)
以上是生活随笔為你收集整理的实现文件上传进度条功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 矩阵图形
- 下一篇： js实现贪吃蛇小游戏