实现文件上传进度条功能

<!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";
}

实现文件上传进度条功能相关推荐

js实现文件上传进度条功能
开发中可能会涉及到需要展示文件上传进度条显示,方便用户知道文件的上传状态.其实进度条展示只需要拿到文件已上传的大小,和被上传文件的总大小即可.废话不多说直接上代码!! class fileUpload ...
php上传完没进度条_php使用APC实现实时上传进度条功能
这篇文章主要介绍了php使用APC实现实时上传进度条功能,php本身不具备可以带有实时上传进度条功能,但是php提供了一个apc,它可以与php配置实现上传进度条,感兴趣的小伙伴们可以参考一下 php ...
php大文件上传插件,PHP 大文件上传进度条实现
目前我知道的方法有两种,一种是使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc),另外一种方法是使用PECL扩 ...
html如何显示上传进度条,HTML5 Ajax文件上传进度条如何显示
这篇文章主要介绍了HTML5 Ajax文件上传进度条是如何显示的,基于原生html5实现,不需要falsh支持,进度可以自定义显示,控制灵活,对HTML5上传进度条感兴趣的小伙伴们可以参考一下原本打 ...
大文件上传进度条显示（仿CSDN资源上传效果） .
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层并显示上传这个过程我这里设置太透明了效果不是很立体文件结构如图: 说明:用到"高山来客" ...
html资源文件记载进度条,HTML5矢量实现文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
jquery和php上传文件进度条,jQuery实现文件上传进度条特效_jquery
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前 ...
django文件——django + jquery-file-upload上传篇（二）-- 插件实现文件上传+进度条显示 +拖入文件上传...
django + jquery-file-upload 插件实现文件上传+进度条显示 1.model.py class Fujian(models.Model):name = models.CharF ...
大文件上传进度条显示（仿CSDN资源上传效果）
浏览-选择文件-点击 "上传 "后,效果如下: 弹出透明UI遮罩层并显示上传这个过程我这里设置太透明了效果不是很立体文件结构如图: 说明:用到"高山来客" ...

实现文件上传进度条功能

实现文件上传进度条功能相关推荐

最新文章

热门文章