当前位置:首页 > PHP教程 > php上传下载 > 列表

二款php ajax文件上传代码

发布:smiling 来源: PHP粉丝网  添加日期:2014-09-09 11:06:36 浏览: 评论:0 

这两款ajax文件上传代码其实都是利用了js的iframe或ajax post来实现的下面来看看代码吧,代码如下:

  1. <html>  
  2. <body>  
  3. <h1>ajax file upload sample</h1><br/><input id="uplaod" name="btn_send" type="button" value="上传测试"/>  
  4. <div id=result></div>  
  5. <pre class=js name="code"> 
  6. <script language="javascript">  
  7. // 上传函数  
  8. function btn_send.onclick() {  
  9. data = ""  
  10. spliter = "-------7d8d733180846"  
  11. datadatadata = data + spliter + " "  
  12. datadatadata = data + "content-disposition: form-data; name="photofile"filename="c:\a.txt" "  
  13. // datadatadata = data + "content-type: image/pjpeg" + vbcrlf  
  14. datadatadata = data + "content-type: text/plain" + " " + " "  
  15. text = "my name is wilson lin."  
  16. postlength = text.length + data.length + 2 + spliter.length + 4  
  17. package = data + text + " " + spliter + "-- " 
  18.  
  19. alert(package)  
  20. // 把xml文档发送到web服务器  
  21. var xmlhttp = new activexobject("microsoft.xmlhttp");  
  22. xmlhttp.open("post","./upload.php",false);  
  23. xmlhttp.setrequestheader("content-type", "multipart/form-data; boundary=-----7d8d733180846");  
  24. xmlhttp.setrequestheader("content-length", postlength);  
  25. xmlhttp.send(package);  
  26. // 显示服务器返回的信息  
  27. result.innerhtml=xmlhttp.responsetext;  
  28. }  
  29. </script>  
  30. </pre>  
  31. </body>  
  32. </html> 
  33.  
  34.  
  35. <html> 
  36. <script language="javascript"> 
  37. <!-- 
  38.    var xmlhttp; 
  39.   function createxmlhttprequest() { 
  40.    if (window.activexobject) { 
  41.     xmlhttp = new activexobject("microsoft.xmlhttp"); 
  42.    } 
  43.    else if (window.xmlhttprequest) { 
  44.     xmlhttp = new xmlhttprequest(); 
  45.    } 
  46.   } 
  47.   function uploade(e){ 
  48.    var fileadd 
  49.    fileadd = e; 
  50.     
  51.     createxmlhttprequest(); 
  52.     xmlhttp.onreadystatechange = handlestatechange
  53.     var url = "pic_upload.asp教程?add="+fileadd+"&timestamp="+new date().gettime(); 
  54.     xmlhttp.open("get",url,true); 
  55.     xmlhttp.send(null); 
  56.    
  57.   } 
  58.   function handlestatechange() { 
  59.    document.getelementbyid("content").innerhtml = "这里写进度条"
  60.    if (xmlhttp.readystate == 4) { 
  61.     if (xmlhttp.status == 200) { 
  62.       
  63.      document.getelementbyid("content").innerhtml = xmlhttp.responsetext; 
  64.        
  65.     } 
  66.     else{ 
  67.      //alert(xmlhttp.status); 
  68.                                                                                   alert('错误,请联系管理员!'); 
  69.       
  70.     } 
  71.    } 
  72.   } 
  73. //--> 
  74. </script> 
  75.  <body> 
  76. <input type=file name="mefile" id="fileadd" onchange="alert(document.getelementbyid('fileadd').value);"> 
  77. <input type="submit" value="上传" onclick="uploade(document.getelementbyid('fileadd').value);"> 
  78. <div id="content"></div> 
  79.  </body> 
  80. </html> 

upload.php文件,代码如下:

  1. <?php  
  2. // $_files['photofile']:是获得上传图片的数组  
  3. // $uploadfile:存放地址  
  4. $uploadfile = "./".$_files['photofile']['name'];  
  5. copy$_files['photofile']['tmp_name'], $uploadfile );  
  6. echo "url: <a href='http://localhost/".$_files['photofile']['name']."' target='_blank'>".$_files['photofile']['name']."</a><br/>";  
  7. ?>  
  8. upload successed! 

实例代码二,代码如下:

  1. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4. <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
  5. <title>无刷新文件上传系统</title> 
  6. </head> 
  7. <body> 
  8. <style> 
  9. .fu_list { 
  10.  width:600px; 
  11.  background:#ebebeb; 
  12.  font-size:12px; 
  13. .fu_list td { 
  14.  padding:5px; 
  15.  line-height:20px; 
  16.  background-color:#fff; 
  17. .fu_list table { 
  18.  width:100%; 
  19.  border:1px solid #ebebeb; 
  20. .fu_list thead td { 
  21.  background-color:#f4f4f4; 
  22. .fu_list b { 
  23.  font-size:14px; 
  24. /*file容器样式*/ 
  25. a.files { 
  26.  width:90px; 
  27.  height:30px; 
  28.  overflow:hidden; 
  29.  display:block; 
  30.  border:1px solid #bebebe; 
  31.  background:url(img/fu_btn.gif) left top no-repeat; 
  32.  text-decoration:none; 
  33. a.files:hover { 
  34.  background-color:#ffffee; 
  35.  background-position:0 -30px; 
  36. /*file设为透明,并覆盖整个触发面*/ 
  37. a.files input { 
  38.  margin-left:-350px; 
  39.  font-size:30px; 
  40.  cursor:pointer; 
  41.  filter:alpha(opacity=0); 
  42.  opacity:0; 
  43. /*取消点击时的虚线框*/ 
  44. a.files, a.files input { 
  45.  outline:none;/*ff*/ 
  46.  hide-focus:expression(this.hidefocus=true);/*ie*/ 
  47. </style> 
  48. <form id="uploadform" action="file.php"
  49.   <table width="63%" border="0" cellspacing="1" class="fu_list"
  50.     <thead> 
  51.       <tr> 
  52.         <td colspan="2"><b>上传文件</b></td> 
  53.       </tr> 
  54.     </thead> 
  55.     <tbody> 
  56.       <tr> 
  57.         <td align="right" width="15%" style="line-height:35px;">添加文件:</td> 
  58.         <td><a href="javascript:void(0);" class="files" id="idfile"></a> <img id="idprocess" style="display:none;" src="img/loading.gif" /></td> 
  59.       </tr> 
  60.       <tr> 
  61.         <td colspan="2"><table border="0" cellspacing="0"
  62.             <thead> 
  63.               <tr> 
  64.                 <td>文件路径</td> 
  65.                 <td width="100"></td> 
  66.               </tr> 
  67.             </thead> 
  68.             <tbody id="idfilelist"
  69.             </tbody> 
  70.           </table></td> 
  71.       </tr> 
  72.       <tr> 
  73.         <td colspan="2" style="color:gray"><label for="textfield"></label> 
  74.         <input type="text" name="uploadsfile" id="uploadsfile" /></td> 
  75.       </tr> 
  76.       <tr> 
  77.         <td colspan="2" style="color:gray">温馨提示:最多可同时上传 <b id="idlimit"></b> 个文件,只允许上传 <b id="idext"></b> 文件。 </td> 
  78.       </tr> 
  79.       <tr> 
  80.         <td colspan="2" align="center" id="idmsg"><input type="button" value="开始上传" id="idbtnupload" disabled="disabled" /> 
  81.           &nbsp;&nbsp;&nbsp; 
  82.           <input type="button" value="全部取消" id="idbtndel" disabled="disabled" /> 
  83.         </td> 
  84.       </tr> 
  85.     </tbody> 
  86.   </table> 
  87. </form> 
  88. <script type="text/javascript"
  89.  
  90. var isie = (document.all) ? true : false; 
  91.  
  92. var $ = function (id) { 
  93.     return "string" == typeof id ? document.getelementbyid(id) : id; 
  94. }; 
  95.  
  96. var class = { 
  97.   create: function() { 
  98.     return function() { 
  99.       this.initialize.apply(this, arguments); 
  100.     } 
  101.   } 
  102.  
  103. var extend = function(destination, source) { 
  104.  for (var property in source) { 
  105.   destination[property] = source[property]; 
  106.  } 
  107.  
  108. var bind = function(object, fun) { 
  109.  return function() { 
  110.   return fun.apply(object, arguments); 
  111.  } 
  112.  
  113. var each = function(list, fun){ 
  114.  for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } 
  115. }; 
  116.  
  117. //文件上传类 
  118. var fileupload = class.create(); 
  119. fileupload.prototype = { 
  120.   //表单对象,文件控件存放空间 
  121.   initialize: function(form, folder, options) { 
  122.  
  123.  this.form = $(form);//表单 
  124.  this.folder = $(folder);//文件控件存放空间 
  125.  this.files = [];//文件集合 
  126.  
  127.  this.setoptions(options); 
  128.  
  129.  this.filename = this.options.filename; 
  130.  this._framename = this.options.framename; 
  131.  this.limit = this.options.limit; 
  132.  this.distinct = !!this.options.distinct; 
  133.  this.extin = this.options.extin; 
  134.  this.extout = this.options.extout; 
  135.  
  136.  this.oninifile = this.options.oninifile; 
  137.  this.onempty = this.options.onempty; 
  138.  this.onnotextin = this.options.onnotextin; 
  139.  this.onextout = this.options.onextout; 
  140.  this.onlimite = this.options.onlimite; 
  141.  this.onsame = this.options.onsame; 
  142.  this.onfail = this.options.onfail; 
  143.  this.onini = this.options.onini; 
  144.  
  145.  if(!this._framename){ 
  146.   //为每个实例创建不同的iframe 
  147.   this._framename = "uploadframe_" + math.floor(math.random() * 1000); 
  148.   //ie不能修改iframe的name 
  149.   var oframe = isie ? document.createelement("<iframe name="" + this._framename + "">") : document.createelement("iframe"); 
  150.   //为ff设置name 
  151.   oframe.name = this._framename; 
  152.   oframe.style.display = "none"
  153.   //在ie文档未加载完用appendchild会报错 
  154.   document.body.insertbefore(oframe, document.body.childnodes[0]); 
  155.  }//开源代码phpfensi.com 
  156.  
  157.  //设置form属性,关键是target要指向iframe 
  158.  this.form.target = this._framename; 
  159.  this.form.method = "post"
  160.  //注意ie的form没有enctype属性,要用encoding 
  161.  this.form.encoding = "multipart/form-data"
  162.  
  163.  //整理一次 
  164.  this.ini(); 
  165.   }, 
  166.   //设置默认属性 
  167.   setoptions: function(options) { 
  168.     this.options = {//默认值 
  169.   filename: "files[]",//文件上传控件的name,配合后台使用 
  170.   framename: "",//iframe的name,要自定义iframe的话这里设置name 
  171.   oninifile: function(){},//整理文件时执行(其中参数是file对象) 
  172.   onempty: function(){},//文件空值时执行 
  173.   limit:  10,//文件数限制,0为不限制 
  174.   onlimite: function(){},//超过文件数限制时执行 
  175.   distinct: true,//是否不允许相同文件 
  176.   onsame:  function(){},//有相同文件时执行 
  177.   extin:  ["gif","jpg","rar","zip","iso","swf","exe"],//允许后缀名 
  178.   onnotextin: function(){},//不是允许后缀名时执行 
  179.   extout:  [],//禁止后缀名,当设置了extin则extout无效 
  180.   onextout: function(){},//是禁止后缀名时执行 
  181.   onfail:  function(){},//文件不通过检测时执行(其中参数是file对象) 
  182.   onini:  function(){}//重置时执行 
  183.     }; 
  184.     extend(this.options, options || {}); 
  185.   }, 
  186.   //整理空间 
  187.   ini: function() { 
  188.  //整理文件集合 
  189.  this.files = []; 
  190.  //整理文件空间,把有值的file放入文件集合 
  191.  each(this.folder.getelementsbytagname("input"), bind(this, function(o){ 
  192.   if(o.type == "file"){ o.value && this.files.push(o); this.oninifile(o); } 
  193.  })) 
  194.  //插入一个新的file 
  195.  var file = document.createelement("input"); 
  196.  file.name = this.filename; file.type = "file"; file.onchange = bind(this, function(){ this.check(file); this.ini(); }); 
  197.  this.folder.appendchild(file); 
  198.  //执行附加程序 
  199.  this.onini(); 
  200.   }, 
  201.   //检测file对象 
  202.   check: function(file) { 
  203.  //检测变量 
  204.  var bcheck = true; 
  205.  //空值、文件数限制、后缀名、相同文件检测 
  206.  if(!file.value){ 
  207.   bcheck = false; this.onempty(); 
  208.  } else if(this.limit && this.files.length >= this.limit){ 
  209.   bcheck = false; this.onlimite(); 
  210.  } else if(!!this.extin.length && !regexp(".(" + this.extin.join("|") + ")$""i").test(file.value)){ 
  211.   //检测是否允许后缀名 
  212.   bcheck = false; this.onnotextin(); 
  213.  } else if(!!this.extout.length && regexp(".(" + this.extout.join("|") + ")$""i").test(file.value)) { 
  214.   //检测是否禁止后缀名 
  215.   bcheck = false; this.onextout(); 
  216.  } else if(!!this.distinct) { 
  217.   each(this.files, function(o){ if(o.value == file.value){ bcheck = false; } }) 
  218.   if(!bcheck){ this.onsame(); } 
  219.  } 
  220.  //没有通过检测 
  221.  !bcheck && this.onfail(file); 
  222.   }, 
  223.   //删除指定file 
  224.   deletefunction(file) { 
  225.  //移除指定file 
  226.  this.folder.removechild(file); this.ini(); 
  227.   }, 
  228.   //删除全部file 
  229.   clear: function() { 
  230.  //清空文件空间 
  231.  each(this.files, bind(this, function(o){ this.folder.removechild(o); })); this.ini(); 
  232.   } 
  233.  
  234. var fu = new fileupload("uploadform""idfile", { extin: ["gif","jpg"], 
  235.  oninifile: function(file){ file.value ? file.style.display = "none" : this.folder.removechild(file); }, 
  236.  onempty: function(){ alert("请选择一个文件"); }, 
  237.  onlimite: function(){ alert("超过上传限制"); }, 
  238.  onsame: function(){ alert("已经有相同文件"); }, 
  239.  onnotextin: function(){ alert("只允许上传" + this.extin.join(",") + "文件"); }, 
  240.  onfail: function(file){ this.folder.removechild(file); }, 
  241.  onini: function(){ 
  242.   //显示文件列表 
  243.   var arrrows = []; 
  244.   if(this.files.length){ 
  245.    var othis = this; 
  246.    each(this.files, function(o){ 
  247.     var a = document.createelement("a"); a.innerhtml = "取消"; a.href = "javascript:void(0);"
  248.     a.onclick = function(){ othis.delete(o); return false; }; 
  249.     arrrows.push([o.value, a]); 
  250.    }); 
  251.   } else { arrrows.push(["<font color='gray'>没有添加文件</font>""&nbsp;"]); } 
  252.   addlist(arrrows); 
  253.   //设置按钮 
  254.   $("idbtnupload").disabled = $("idbtndel").disabled = this.files.length <= 0; 
  255.  } 
  256. }); 
  257.  
  258. $("idbtnupload").onclick = function(){ 
  259.  //显示文件列表 
  260.  var arrrows = []; 
  261.  each(fu.files, function(o){ arrrows.push([o.value, "&nbsp;"]); }); 
  262.  addlist(arrrows); 
  263.  
  264.  fu.folder.style.display = "none"
  265.  $("idprocess").style.display = ""
  266.  $("idmsg").innerhtml = "正在添加文件到您的网盘中,请稍候……<br />有可能因为网络问题,出现程序长时间无响应,请点击"<a href='?'><font color='red'>取消</font></a>"重新上传文件"
  267.  
  268.  fu.form.submit(); 
  269.  
  270. //用来添加文件列表的函数 
  271. function addlist(rows){ 
  272.  //根据数组来添加列表 
  273.  var filelist = $("idfilelist"), ofragment = document.createdocumentfragment(); 
  274.  //用文档碎片保存列表 
  275.  each(rows, function(cells){ 
  276.   var row = document.createelement("tr"); 
  277.   each(cells, function(o){ 
  278.    var cell = document.createelement("td"); 
  279.    if(typeof o == "string"){ cell.innerhtml = o; }else{ cell.appendchild(o); } 
  280.    row.appendchild(cell); 
  281.   }); 
  282.   ofragment.appendchild(row); 
  283.  }) 
  284.  //ie的table不支持innerhtml所以这样清空table 
  285.  while(filelist.haschildnodes()){ filelist.removechild(filelist.firstchild); } 
  286.  filelist.appendchild(ofragment); 
  287.  
  288.  
  289. $("idlimit").innerhtml = fu.limit; 
  290.  
  291. $("idext").innerhtml = fu.extin.join(","); 
  292.  
  293. $("idbtndel").onclick = function(){ fu.clear(); } 
  294.  
  295. //在后台通过window.parent来访问主页面的函数 
  296. function finish(msg) 
  297. {  
  298.  $('uploadsfile').value=msg;  
  299.  
  300. </script> 
  301. </body> 
  302. </html> 

php接ajax上传代码,代码如下:

  1. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4. <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
  5. <title>无标题文档</title> 
  6. </head> 
  7. <body> 
  8. <? 
  9. $sort=12; 
  10. $f_type=strtolower("swf,jpg,rar,zip,7z,iso,gif");//设置可上传的文件类型  
  11. $file_size_max=200*1024*1024;//限制单个文件上传最大容量  
  12. $overwrite = 0;//是否允许覆盖相同文件,1:允许,0:不允许  
  13. $f_input="files";//设置上传域名称 
  14.     foreach($_files[$f_input]["error"as $key => $error){  
  15.         $up_error="no";  
  16.         if ($error == upload_err_ok){  
  17.             $f_name=$_files[$f_input]['name'][$key];//获取上传源文件名  
  18.     
  19.             $uploadfile=$uploaddir.strtolower(basename($f_name));  
  20.               
  21.             $tmp_type=substr(strrchr($f_name,"."),1);//获取文件扩展名 
  22.    $tmp_type=strtolower($tmp_type);  
  23.             if(!stristr($f_type,$tmp_type)){  
  24.                 echo "<script>alert('对不起,不能上传".$tmp_type."格式文件, ".$f_name." 文件上传失败!')</script>";  
  25.                 $up_error="yes";  
  26.             }  
  27.               
  28.             if ($_files[$f_input]['size'][$key]>$file_size_max) {  
  29.     
  30.                 echo "<script>alert('对不起,你上传的文件 ".$f_name." 容量为".round($_files[$f_input
  31. ['size'][$key]/1024)."kb,大于规定的".($file_size_max/1024)."kb,上传失败!')</script>";  
  32.                 $up_error="yes";  
  33.             }  
  34.               
  35.             if (file_exists($uploadfile)&&!$overwrite){  
  36.                 echo "<script>alert('对不起,文件 ".$f_name." 已经存在,上传失败!')</script>";  
  37.                 $up_error="yes";  
  38.             }  
  39.              $string = 'abcdefghijklmnopgrstuvwxyz0123456789'
  40. $rand = ''
  41. for ($x=0;$x<12;$x++) 
  42.   $rand .= substr($string,mt_rand(0,strlen($string)-1),1); 
  43. $t=date("ymdhis").substr($gettime[0],2,6).$rand
  44. $attdir="./file/";   
  45.     if(!is_dir($attdir))    
  46.     {  mkdir($attdir);} 
  47.             $uploadfile=$attdir.$t.".".$tmp_type;  
  48.             if(($up_error!="yes"and (move_uploaded_file($_files[$f_input]['tmp_name'
  49.  
  50. [$key], $uploadfile))){ 
  51.  
  52.                   
  53.     $_msg=$_msg.$f_name.'上传成功 '
  54.      
  55.      
  56.             }  
  57.    else
  58.    $_msg=$_msg.$f_name.'上传失败 '
  59.    } 
  60.         }  
  61.  
  62.     }  
  63. echo "<script>window.parent.finish('".$_msg."');</script>";  
  64. ?> 
  65. </body> 
  66. </html> 

Tags: php ajax文件上传

分享到: