原生JS上传大文件显示进度条 php上传文件代码
JS原生上传大文件显示进度条，php上传文件，供大家参考，具体内容如下
在php.ini修改需要的大小：
upload_max_filesize = 8M
post_max_size = 10M
memory_limit = 20M
<!DOCTYPE html>
<html>
<head>
<title>原生JS大文件显示进度条</title>
<meta charset="UTF-8">
<style type="text/css">
#parent{position: relative;width: 500px;height:20px;border:1px solid #ccc;display: none;border-radius:20px}
#child{position: absolute;width:0%;height:20px;background: #5FB878;display: none;line-height: 20px;color: #ffffff;font-size: 12px;border-radius:20px}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<form action="" method="post">
<div id="parent">
<div id="child"></div>
</div>
<p>上传文件:<input type="file" name="file"></p>
<p><input type="submit" value="提交" id="submit"></p>
</form>
<script type="text/javascript">
var oForm = document.getElementsByTagName('form')[0];
var oSubmit = $('submit');
//如果多个人同时提交这个表单的时候，由于是异步的请求，互不影响
oSubmit.onclick = function(){
try{
var xhr = new XMLHttpRequest();
}catch(e){
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
xhr.upload.onprogress = function(e){
var ev = e || window.event;
var percent = Math.floor((ev.loaded / ev.total)*100);
// console.log(percent);
//将百分比显示到进度条
$('parent').style.display = 'block';
$('child').style.display = 'block';
//将上传进度的百分比显示到child里面
$('child').style.width = percent+'%';
$('child').style.textAlign = 'center';
$('child').innerHTML = percent+'%';
//判断如果百分比到达100%时候，隐藏掉
if(percent==100){
$('parent').style.display = 'none';
$('child').style.display = 'none';
}
}
xhr.open('post','progress.php',true);
var form = new FormData(oForm);
xhr.send(form);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
eval("var obj ="+xhr.responseText);
if(obj.status){
alert('上传成功');
}else{
alert('上传失败');
}
}
}
//阻止表单提交
return false;
}
</script>
</body>
</html>
<?php
//开始上传
//注意：文件是windows系统的文件，采用的gbk编码，php文件使用的是utf-8编码
//我们不能直接修改文件的编码，只能临时修改一下php的编码
$dst_file = $_FILES['file']['name'];
$dst_file = iconv('utf-8', 'gbk', $dst_file);
if(move_uploaded_file($_FILES['file']['tmp_name'],$dst_file)){
$data['status'] = 1;
}else{
$data['status'] = 0;
}
echo json_encode($data);
更多精彩内容请参考专题《ajax上传技术汇总》，《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Jquery和BigFileUpload实现大文件上传及进度条显示，包括了Jquery和BigFileUpload实现大文件上传及进度条显示的使用技巧和注意事项，需要的朋友参考一下 实现方法：用到了高山来客 的bigfileupload组件，用高山来客的方法，弹出一个模式窗口，然后不停刷新获取进度，始终觉得体验感不好，于是想到用jquery来实现无刷新进度显示，因为提交页面后， 不能
-
本文向大家介绍PHP大文件切割上传并带进度条功能示例，包括了PHP大文件切割上传并带进度条功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了PHP大文件切割上传并带进度条功能。分享给大家供大家参考，具体如下： 前面一篇介绍了PHP大文件切割上传功能，这里再来进一步讲解PHP大文件切割上传并带进度条功能。 项目结构图： 14-slice-upload-fix.html文件： 13-sl
-
本文向大家介绍servlet+jquery实现文件上传进度条示例代码，包括了servlet+jquery实现文件上传进度条示例代码的使用技巧和注意事项，需要的朋友参考一下 现在文件的上传，特别是大文件上传，都需要进度条，让客户知道上传进度。 本文简单记录下如何弄进度条，以及一些上传信息，比如文件的大小，上传速度，预计剩余时间等一些相关信息。代码是匆忙下简单写的，一些验证没做，或代码存在一些隐患，不
-
问题内容： 看来我还没有清楚地传达出我的问题。我需要发送一个文件（使用AJAX），并且需要使用Nginx HttpUploadProgressModule 获取文件的上传进度。我需要一个很好的解决方案。我已经尝试过使用jquery.uploadprogress插件，但是我发现自己不得不重写其中的大部分内容，以使其在所有浏览器中都能正常工作并使用AJAX发送文件。 我所需要的只是执行此操作的代码，它
-
本文向大家介绍JS实现批量上传文件并显示进度功能，包括了JS实现批量上传文件并显示进度功能的使用技巧和注意事项，需要的朋友参考一下 今天接受项目中要完成文件批量上传文件而且还要显示上传进度，一开始觉得这个应该不是很麻烦，当我在做的时候遇到了很多问题，很头疼啊。 不过看了别人写的代码，自己也测试过，发现网上好多都存在一些问题，并不是自己想要的。然后自己查阅各种资料，经过自己总结，最终完成了这个功能。
-
问题内容： 我有上传表格，允许用户上传多个文件。我决定，如果文件很大，则进度条会很好。下面是我的源代码。我是jQuery的新手，通常我只会使用php，但是我发现ajax更加用户友好。 图像上传正常，数组发送到ajax，但进度条不动。实际上，调用这两个函数的console.log都不会产生这种情况。有没有正确的方法来调用我的ajax请求中的函数，以使此进度条正常工作。 beforeSubmit：be