学习js1js ajax应用技术文件

1、文件上传处理伪装上传利用iframe实现XHR对象-ajax上传文件/创建对象，发送请求，服务器处理，输出结果到页面/文件上传/用ajax实现文件的上传思路/1 捕捉表单提交信息/2 创建一个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);/执行文件的上传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来实现文件上传/1 创建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创建xhr对象xhr.open(POST,url,true);/2打开连接/设置响应头信息setRequestHeader();xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded);/4 状态发生改变，回调函数处理服务器信息xhr.onreadystatechange=function()/xhr对象状态码，服务器返回状态码4,200触发回调函数if(xhr.readyState=4 & xhr.status=200)mess_info.in