JS原生上传大文件显示进度条,php上传文件,供大家参考,具体内容如下
在php . ini中修改需要的大小:
upload_max_filesize=8 m ,,
post_max_size=10 m ,,
memory_limit=20 m
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title>原生JS大文件显示进度条& lt;/title>
& lt;元charset=皍tf - 8”比;
& lt;风格类型=" text/css "比;
#父母{位置:相对;宽度:500 px;高度:20 px;边界:1 px固体# ccc;显示:没有;border - radius: 20 px}
#孩子{位置:绝对的,宽度:0%;高度:20 px;背景:# 5 fb878;显示:没有,行高:20 px;颜色:# ffffff,字体大小:12 px; border - radius: 20 px}
& lt;/style>
& lt;脚本type=" text/javascript祝辞
函数$ (id) {
返回. getelementbyid (id);
}
& lt;/script>
& lt;/head>
& lt; body>
& lt;形式action="方法=皃ost”比;
& lt; div id=案浮北?
& lt; div id="孩子"祝辞& lt;/div>
& lt;/div>
& lt; p>上传文件:& lt;输入type="文件" name="文件"祝辞& lt;/p>
& lt; p> & lt;输入类型=疤峤弧眝alue=" https://www.yisu.com/zixun/提交" id=疤峤弧弊４? lt;/p>
& lt;/form>
& lt;脚本type=" text/javascript祝辞
var oForm=document.getElementsByTagName(“形式”)[0];
var oSubmit=$('提交');//如果多个人同时提交这个表单的时候,由于是异步的请求,互不影响
oSubmit。onclick=function () {
尝试{
var xhr=new XMLHttpRequest ();
}捕捉(e) {
var xhr=new ActiveXObject (“Msxml2.XMLHTTP”);
}
xhr.upload。onprogress=function (e) {
var ev=e | | window.event;
var=Math.floor ((ev百分比。加载/ev.total) * 100);//console.log(百分比);//将百分比显示到进度条
(“母公司”).style美元。显示=翱椤?
$('孩子').style。显示=翱椤?//将上传进度的百分比显示到孩子里面
$('孩子').style。宽度=+ %的百分比;
$('孩子').style。textAlign=爸行摹?
$('孩子')。innerHTML=+ %的百分比;//判断如果百分比到达100%时候,隐藏掉
如果(%==100){
(“母公司”).style美元。显示='没有';
$('孩子').style。显示='没有';
}
}
xhr.open(‘后’,‘progress.php’,真正的);
var=new FormData形式(oForm);
xhr.send(形式);
xhr。onreadystatechange=function () {
如果(xhr。readyState==4,,xhr.status==200) {
eval (“var obj=" + xhr.responseText);
如果(obj.status) {
alert('上传成功”);
其他}{
alert('上传失败”);
}
}
}//阻止表单提交
返回错误;
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
& lt; & # 63; php//开始上传//注意:文件是windows系统的文件,采用的gbk编码,php文件使用的是utf - 8编码//我们不能直接修改文件的编码,只能临时修改一下php的编码
dst_file=带有_file美元(“文件”)(“名字”);
美元dst_file=iconv (“utf - 8”, gbk, dst_file美元);
如果函数(带有_file美元(“文件”)(“tmp_name”), dst_file美元)){
$ data[“地位”]=1;
其他}{
$ data[“地位”]=0;
}
回声json_encode(元数据);
之前
更多精彩内容请参考专题《ajax上传技术汇总》、《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
