使用FormData實現ajax文件異步上傳
可控的異步上傳javascript
1.傳統的web開發文件上傳通常是基於form表單的文件上傳，同步的方式，用戶體驗差，可控性也差php
2.異步上傳的實現 有如下方式html
2.1 藉助瀏覽器插件 通常須要安裝一些相似flash的插件 這種方式 缺點：須要安裝插件 優勢：可控性強，性能高html5
2.2 這種是僞異步上傳，藉助表單向隱藏的iframe提交，而後經過iframe通訊操做當前頁面 這種方式可控行查，體驗通常，見下面代碼java
2.3 藉助html5 裏的 FormData 對象，可實現進度控制，異步的上傳方式，見代碼node
iframe方式的僞異步上傳jquery
up.htmlweb
<!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>
View Codejson
提交處理程序代碼 doup.php後端
<?phpif($_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 var parent=window.parent.document; var img="$dst_file' style='width:200px;height:200px;'>";
$('#res',parent).html(img); " _ue_custom_node_="true">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);