AJAX_大文件上传(显示进度条)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</title> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <link href="" rel="stylesheet"> 10 <style> 11 #outer{ 12 width: 300px; 13 height: 30px; 14 border: 1px solid red; 15 position: relative; 16 text-align: center; 17 } 18 #jdt{ 19 height: 30px; 20 position: absolute; 21 z-index: -100; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="outer"> 27 <div id="jdt"></div> 28 </div> 29 <form id="main"> 30 选择文件 : <input type="file" name="file"><br /> 31 <input type="button" value="上传" onclick="upLoadfile()"> 32 </form> 33 <script> 34 function upLoadfile() { 35 var fm=document.getElementById('main');//1. 获取表单对象 36 var fd=new FormData(fm);//2. 实例化FormData对象 37 var xhr =new XMLHttpRequest();//3. 实例化XMLHttpRequest对象 38 xhr.open('post','upfile.php');//4. 调用open方法，准备ajax请求 39 var jdt=document.getElementById('jdt');//获取进度条对象 40 var outer=document.getElementById('outer'); 41 xhr.upload.onprogress = function(a) {//参数a是事件，onprogress事件获取到的数据全部保存到a当中 42 //计算每100ms文件上传的程度占总体的百分比,取两位小数 43 var percent = parseInt((a.loaded/a.total)*100); 44 //总体长度300px,计算当前进度条长度 46 var len = percent * 300 /100; 47 //设定进度条宽 50 outer.innerHTML ="<div id='jdt' style='width:"+len+"px;background:skyblue;'></div>"+ percent + '%'; 51 } 52 xhr.send(fd);//5. 调用send方法，发送ajax请求 53 xhr.onreadystatechange=function () {//6. 调用onreadystatechange事件接收结果 54 if (xhr.readyState == 4) { 55 if (xhr.responseText == 1) { 56 alert('文件上传成功'); 57 } else { 58 alert('文件上传失败'); 59 } 60 } 61 } 62 } 63 </script> 64 </body> 65 </html>
================================================HTML代码=============================================
1 <?php 2 /** 3 * 4 * @authors Your Name (you@example.org) 5 * @date 2017-10-29 16:42:50 6 * @version $Id$ 7 */ 8 header("content-type:text/html;charset=utf-8"); 9 if($_FILES['file']['error'] == 0){//获取文件error属性值,为0时表示文件上传成功 10 $ext=strrchr($_FILES['file']['name'],'.');//获取文件扩展名 11 $name=time().'_'.rand(1000,9999).$ext;//随机文件名防止文件重名 12 if(move_uploaded_file($_FILES['file']['tmp_name'],$name)){ 13 echo 1; 14 }else{ 15 echo 2; 16 } 17 }else{ 18 echo 2; 19 }
=======================================================PHP代码=========================================================
需要修改虚拟主机配置文件中的POST默认上传文件大小与文件上传大小的限制(尽量前者比后者稍大,避免文件大小和表单大小一致时表单数据无法上传)
智能推荐
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。