使用FormData实现ajax文件异步上传
1.传统的web开发文件上传一般是基于form表单的文件上传，同步的方式，用户体验差，可控性也差
2.异步上传的实现 有以下方式
2.1 借助浏览器插件 一般需要安装一些类似flash的插件 这种方式 缺点：需要安装插件 优点：可控性强，性能高
2.2 这种是伪异步上传，借助表单向隐藏的iframe提交，然后通过iframe通信操作当前页面 这种方式可控行查，体验一般，见下面代码
2.3 借助html5 里的 FormData 对象，可实现进度控制，异步的上传方式，见代码
iframe方式的伪异步上传
up.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> </head> <body> <form method="post" action="doup.php" enctype="multipart/form-data" target="up_file"> 姓名：<input name="user" type="text"><br> 文件:<input type="file" name="ff"><br> <input type="submit" value="提交"> </form> <iframe name="up_file" style="display: none"></iframe> <div id="res"></div> </body> </html>
提交处理程序代码 doup.php
<?php if($_FILES){ $f=$_FILES['ff']; $tmp_name=$f['tmp_name']; if($f['error']===0){ if(is_uploaded_file($tmp_name)){ $file_arr=pathinfo($f['name']); //防止特殊文件名 if(!is_dir('./upfile')) mkdir('./upfile',0755); $dst_file='./upfile/'.time()."-".substr(md5($file_arr['filename']),0,5).".".$file_arr['extension']; $o=move_uploaded_file($tmp_name,$dst_file); if($o){ $html=<<<E <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> <script> var parent=window.parent.document; var img="<img src='$dst_file' style='width:200px;height:200px;'>"; $('#res',parent).html(img); </script> E; echo $html; }else{ echo 0; } } } }
借助FormData实现真的可控行异步上传
up1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> </head> <body> 文件:<input type="file" name="myfile" id="myfile"><br> <p id="upbtn"> <input type="button" value="异步上传" onclick="upload()"> <span id="uptext" style="display: none">正在上传</span> <span id="tip"></span> <button id="stopbtn" style="display: none">停止上传</button> </p> <div id="res"></div> <script> function upload(){ var fd=new FormData(); var f=$("#myfile")[0].files[0]; if(typeof f !== "object") { alert('请先选择文件！'); return false; } fd.append('myfile',f); var xhr=new XMLHttpRequest(); xhr.upload.onprogress=function(e){ if(e.lengthComputable){ var percent=Math.round((e.loaded*100/e.total)); console.log('%d',percent); $('#tip').text(percent); } } xhr.onloadstart=function(e){ console.log("load start"); $('#tip').text('开始上传'); $('#stopbtn').one('click',function(){ xhr.abort(); $(this).hide(); }); loading(true); } xhr.onload=function(e){ var res=xhr.responseText; var res_arr=JSON.parse(res); console.log(res_arr); if(res_arr.status==1){ $('#tip').text('上传成功'); $('#res').html(res_arr.dst); }else{ $('#tip').text(res_arr.info); } } xhr.onerror=function(){ console.log('error'); $('#tip').text('发生错误'); } xhr.onloadend=function (e){ console.log("load end"); loading(false); } xhr.open("POST","./doup1.php",true); xhr.send(fd); } function loading(showloading) { if (showloading) { $("#uptxt").show(); $("#stopbtn").show(); } else { $("#uptxt").hide(); $("#stopbtn").hide(); } } </script> </body> </html>
后端处理doup1.php
<?php $status=0; $arr=array('status'=>0,'info'=>'没有文件上传或上传配置问题'); if($_FILES){ $f=$_FILES['myfile']; $tmp_name=$f['tmp_name']; if($f['error']===0){ if(is_uploaded_file($tmp_name)){ $file_arr=pathinfo($f['name']); if(!is_dir('./upfile')) mkdir('./upfile',0755); $dst_file='./upfile/'.time()."-".substr(md5($file_arr['filename']),0,5).".".$file_arr['extension']; $o=move_uploaded_file($tmp_name,$dst_file); if($o){ $arr=array('dst'=>$dst_file,'status'=>1); }else{ $arr=array('status'=>0,'info'=>'移动文件失败'); } } }else{ $arr=array('status'=>0,'info'=>"up_err_code:".$f['error']); } } echo json_encode($arr);
