原生ajax上传文件+进度条
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生ajax上传文件+进度条相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>上传文件</title> <style> #big{ width:300px; height:30px; background-color:rgb(224, 229, 233); border:solid 1px #ccc; } #small{ width:0px; height:28px; background-color:rgb(211, 25, 25); border:solid 1px #ccc; } </style> <script> function t(){ var xhr= new XMLHttpRequest(); xhr.upload.onprogress=function(evt){ //这里的evt表示onprogress //console.log(evt); var baifenbi=Math.round((evt.loaded/evt.total)*100)+\'%\'; document.getElementById(\'small\').style.width=baifenbi; } xhr.open(\'post\',\'index.php\',true); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ //console.log(xhr.responseText); } } //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // var submit=document.getElementById(\'submit\').value; // var upload=document.getElementById(\'upload\').value; // xhr.send(\'submit=\'+submit+\'&upload=\'+upload); var fm=document.getElementsByTagName(\'form\')[0]; var data=new FormData(fm); xhr.send(data); } </script> </head> <body> <form action="" > <!-- <input type="file" id="upload" name="upload"></input> --> <input type="file" name="upload"> <input type="button" value="上传" onclick="t()"></input> </form> <div id="big"> <div id="small"></div> </div> </body> </html>
<?php header(\'content-type:text/html;charset=utf-8\'); //第一步：判断是否是http post上传的 // if(!is_uploaded_file($_FILES[\'upload\'][\'tmp_name\'])){ // exit(\'非法上传\'); // } //第二步：判断是否有错误 if($_FILES[\'upload\'][\'error\']!=0){ exit(\'上传文件错误\'); } //第三步：判断文件类型 $fs = finfo_open(FILEINFO_MIME_TYPE); //得到一个mime类型资源 $mime= finfo_file($fs,$_FILES[\'upload\'][\'tmp_name\']); //上文文件得mime类型 $arr= array(\'image/jpeg\',\'image/png\',\'image/gif\'); //允许上传的mime类型 if(!in_array($mime,$arr)){ exit(\'上传类型不符\'); } //第四步：获取文件拓展名 $index=strrpos($_FILES[\'upload\'][\'name\'],\'.\'); //获取文件最后一个点的位置 $ext=substr($_FILES[\'upload\'][\'name\'],$index); //取出扩展名 //第五步：判断文件大小，允许，上传小于2M的文件 if($_FILES[\'upload\'][\'size\']>2*1024*1024){ exit(\'文件上传过大\'); } //第六步：临时文件 $filename=$_FILES[\'upload\'][\'tmp_name\']; //第七步：构建目标文件 $path=\'./upload\'; @mkdir($path); $destionation=$path.\'/\'.uniqid().$ext; //第八部：正式上传 if(move_uploaded_file($filename,$destionation)){ echo "上传成功"; }else{ echo "上传失败"; }
以上是关于原生ajax上传文件+进度条的主要内容，如果未能解决你的问题，请参考以下文章