學習js1js ajax應用技術(shù)文件

1、文件上傳處理偽裝上傳利用iframe實現(xiàn)XHR對象-ajax上傳文件/創(chuàng)建對象，發(fā)送請求，服務器處理，輸出結(jié)果到頁面/文件上傳/用ajax實現(xiàn)文件的上傳思路/1 捕捉表單提交信息/2 創(chuàng)建一個iframe/3 將表單target修改指向iframe/4 去掉iframefunction upload_file()var myfrm=$(#my_frm);var fname=up+Math.random();var mess_info=$(#mess_info);var pic_iframe=$();pic_iframe.appendTo(body);myfrm.attr(target,fnam

2、e);/表單的target屬性$(#process).html();/上傳進度條myfrm.submit();處理的PHP文件?php/文件上傳$file=$_FILESfile_pic;$path=upload;/上傳文件目錄if(empty($filetmp_name)/沒有選擇文件$arrmsg=沒有選擇文件;$arrstatus=-1;echo json_encode($arr);exit;if(!is_dir($path)mkdir($path,0777);sleep(3);/執(zhí)行文件的上傳if($fileerror=0)$filename=$filename;/包含.截取到末尾$f

3、ilename=date(Ymdhis)._.rand(1000,9999).substr($filename,strrpos($filename,.);/保存路徑$uploadfile=$path./.$filename;/echo $uploadfile;/upload/20140921014503_2990.jpg$ok=move_uploaded_file($filetmp_name,$uploadfile);if($ok)$arrmsg=上傳成功;$arrstatus=1;else$arrmsg=上傳失敗;$arrstatus=0;else$arrmsg=位置錯誤;$arrstatu

4、s=-2;/echo json_encode($arr);echo parent.document.getElementById(process).innerHTML=.$arrmsg.;/echo parent.document.getElementById(mess_info).innerHTML=.json_encode($arr).;exit;利用html5來實現(xiàn)文件上傳/1 創(chuàng)建xhr對象function createXHR()/ie,非IE判斷var xhr=null;if(window.ActiveXObject)xhr=new ActiveXObject(Microsoft.X

5、MLHTTP);else if(window.XMLHttpRequest)xhr=new XMLHttpRequest();return xhr;function zhuce()var my_frm=document.getElementById(my_frm);var mess_info=document.getElementById(mess_info);var data=new FormData(my_frm);/表單對象，可以人為的加一些元素/data.append(mes);var url=my_frm.getAttribute(action);/獲取表單提交地址var xhr=createXHR();/1創(chuàng)建xhr對象xhr.open(POST,url,true);/2打開連接/設(shè)置響應頭信息setRequestHeader();xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);/4 狀態(tài)發(fā)生改變，回調(diào)函數(shù)處理服務器信息xhr.onreadystatechange=function()/xhr對象狀態(tài)碼，服務器返回狀態(tài)碼4,200觸發(fā)回調(diào)函數(shù)if(xhr.readyState=4 & xhr.status=200)mess_info.in