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

ajax+php文件上传代码

发布:smiling 来源: PHP粉丝网  添加日期:2014-09-09 13:25:46 浏览: 评论:0 

这是一款精小精悍的文件上传代码,并且很实用的ajax php文件上传代码,ajax文件上传原理很简单就是实时返回用户提交的数据,进行计算,这样只是局部刷新了页面,用户感觉不到的,代码如下:

  1. <p id="errorremind"></p> 
  2. <input id="unloadpic" type="button" value="上传图片" /> 
  3. <ol id="uploadedname"></ol>  
  4.  
  5. <script type="text/javascript" > 
  6.  (function(){ 
  7.  
  8.  var d = document, w = window; 
  9.  
  10.  
  11.  function get(element){ 
  12.  if (typeof element == "string"
  13.   element =d.getelementbyid(element); 
  14.  return element; 
  15.  } 
  16.  
  17.  function addevent(el, type, fn){ 
  18.  if (w.addeventlistener){ 
  19.  el.addeventlistener(type, fn, false);} else if (w.attachevent){var f = function(){ 
  20.  fn.call(el, w.event); 
  21.  };    
  22.  el.attachevent('on' + type, f) 
  23.  }} 
  24.  
  25.  
  26.  var toelement = function(){var div = d.createelement('div'); 
  27.   return function(html){div.innerhtml = html;var el = div.childnodes[0]; 
  28.  div.removechild(el);return el;} 
  29.  }(); 
  30.  
  31.  
  32.  function hasclass(ele,cls){ 
  33.  return ele.classname.match(new regexp('(\s|^)'+cls+'(\s|$)')); 
  34.  } 
  35.  
  36.  function addclass(ele,cls) { 
  37.  if (!hasclass(ele,cls)) ele.classname += " "+cls; 
  38.  } 
  39.  
  40.  function removeclass(ele,cls) { 
  41.  var reg = new regexp('(\s|^)'+cls+'(\s|$)'); 
  42.  ele.classname=ele.classname.replace(reg,' '); 
  43.  } 
  44.    
  45.  
  46.  if (document.documentelement["getboundingclientrect"]){ 
  47.  
  48.   var getoffset = function(el){var box = el.getboundingclientrect(), 
  49.  doc = el.ownerdocument,body = doc.body, 
  50.    docelem = doc.documentelement,clienttop = docelem.clienttop || body.clienttop || 0,clientleft = docelem.clientleft || body.clientleft || 0, 
  51.  zoom = 1; 
  52.  if (body.getboundingclientrect) {var bound = body.getboundingclientrect(); 
  53.  zoom = (bound.right - bound.left)/body.clientwidth; 
  54.  } 
  55.  
  56.  if (zoom > 1){ 
  57.  clienttop = 0; 
  58.  clientleft = 0;} 
  59.  var top = box.top/zoom + (window.pageyoffset || docelem && docelem.scrolltop/zoom || body.scrolltop/zoom) - clienttop,left = box.left/zoom + (window.pagexoffset|| docelem && docelem.scrollleft/zoom || body.scrollleft/zoom) - clientleft; 
  60.  
  61.  return { 
  62.  top: top,left: left 
  63.  };} 
  64.  
  65.  }else { 
  66.  var getoffset = function(el){ 
  67.  if (w.jquery){ 
  68.  return jquery(el).offset(); 
  69.  }var top = 0, left = 0; 
  70.  do {top += el.offsettop || 0; 
  71.  left += el.offsetleft || 0;} 
  72.   while (el = el.offsetparent);return {left: left, 
  73.  top: top};} 
  74.  } 
  75.  
  76.  
  77.  
  78.  
  79.  
  80.  function getbox(el){ 
  81.  var left, right, top, bottom;var offset = getoffset(el); 
  82.  left=offset.left; 
  83.  top = offset.top;right = left + el.offsetwidth;bottom = top + el.offsetheight;return { 
  84.   left: left, 
  85.  right: right,top: top,bottom: bottom 
  86.  }; 
  87.  } 
  88.  
  89.  
  90.  
  91.  function getmousecoords(e){    
  92.    
  93.  if (!e.pagex && e.clientx){var zoom = 1;  
  94.  var body = document.body; 
  95.  
  96.  if (body.getboundingclientrect) { 
  97.  var bound = body.getboundingclientrect();zoom = (bound.right - bound.left)/body.clientwidth; 
  98.  } 
  99.  
  100.    
  101.      return { 
  102.  x: e.clientx / zoom + d.body.scrollleft + d.documentelement.scrollleft, y: e.clienty / zoom + d.body.scrolltop + d.documentelement.scrolltop 
  103.  }; 
  104.  }return {x: e.pagex,y: e.pagey 
  105.  }; 
  106.  
  107.  } 
  108.  
  109.  
  110.  
  111.  
  112.  
  113.  var getuid = function(){var id = 0;return function(){ 
  114.  return 'valumsajaxupload' + id++; 
  115.  } 
  116.  }(); 
  117.  
  118.  
  119.  function filefrompath(file){return file.replace(/.*(/|\)/, ""); 
  120.  } 
  121.  
  122.  
  123.  function getext(file){ 
  124.  return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.tolowercase()) : ''
  125.  } 
  126.  
  127.  
  128.  
  129.  
  130.  
  131.  
  132.  var getxhr = function(){var xhr; 
  133.  return function(){if(xhr) return xhr; 
  134.  if (typeof xmlhttprequest !== 'undefined') { 
  135.  xhr = new xmlhttprequest(); 
  136.  }else {var v = [ 
  137.  "microsoft.xmlhttp","msxml2.xmlhttp.5.0"
  138.  "msxml2.xmlhttp.4.0"
  139.  "msxml2.xmlhttp.3.0"
  140.  "msxml2.xmlhttp.2.0"];for (var i=0; i <v.length; i++){ try {xhr = new activexobject(v[i]); 
  141.  break
  142.  } catch (e){}} 
  143.  } 
  144.  return xhr; 
  145.  } 
  146.  }(); 
  147.  
  148.  
  149.  
  150.  
  151.  
  152.  
  153.  // please use ajaxupload , ajax_upload will be removed in the next version 
  154.  ajax_upload = ajaxupload = function(button, options){ 
  155.  
  156.     if (button.jquery){button = button[0];} else if (typeof button == "string" && /^#.*/.test(button)){button = button.slice(1);} 
  157.    
  158.  button = get(button);this._input = null
  159.   this._button = button;this._disabled = false;this._submitting = false
  160.  this._justclicked = false
  161.  this._parentdialog = d.body; 
  162.  if (window.jquery && jquery.ui && jquery.ui.dialog){var parentdialog = jquery(this._button).parents('.ui-dialog');if (parentdialog.length){this._parentdialog = parentdialog[0];}} 
  163.  this._settings = {action: 'upload.php',name: 'userfile'
  164.  data: {}, 
  165.  autosubmit: true,responsetype: false,closeconnection: ''
  166.  hoverclass: 'hover',onchange: function(file, extension){},onsubmit: function(file, extension){},oncomplete: function(file, response) {} 
  167.  }; 
  168.  
  169.  
  170.  for (var i in options) {this._settings[i] = options[i];} 
  171.   this._createinput();this._rerouteclicks(); 
  172.  } 
  173.  
  174.  
  175.  
  176.  
  177.  // assigning methods to our class 
  178.  ajaxupload.prototype = { 
  179.  setdata : function(data){this._settings.data = data;},disable : function(){this._disabled = true
  180.  },enable : function(){this._disabled = false;}, 
  181.  destroy : function(){ 
  182.  if(this._input){ 
  183.  if(this._input.parentnode){this._input.parentnode.removechild(this._input); 
  184.  } 
  185.   this._input = null
  186.  } 
  187.  },_createinput : function(){ 
  188.  var self = this
  189.  var input = d.createelement("input"); 
  190.  input.setattribute('type','file');input.setattribute('name'this._settings.name); 
  191.  
  192.  var styles = {'position' : 'absolute' 
  193.  ,'margin''-5px 0 0 -175px','padding': 0,'width''220px','height''30px','fontsize''14px' ,'opacity': 0,'cursor''pointer' 
  194.  ,'display' : 'none','zindex' :  2147483583 ,'direction' : 'ltr'}; 
  195.  
  196.  
  197.  for (var i in styles){ 
  198.  input.style[i] = styles[i];} 
  199.  
  200.  if ( ! (input.style.opacity === "0")){input.style.filter = "alpha(opacity=0)";} 
  201.          
  202.     
  203.  this._parentdialog.appendchild(input); 
  204.  addevent(input, 'change',function(){var file = filefrompath(this.value);if(self._settings.onchange.call(self, file, getext(file)) == false ){return;}       
  205.  if (self._settings.autosubmit){ 
  206.  self.submit();} 
  207.  
  208.   }); 
  209.  
  210.  
  211.  addevent(input, 'click'function(){ 
  212.  self.justclicked = true;settimeout(function(){self.justclicked = false;}, 2500);});this._input = input; 
  213.  }, 
  214.   _rerouteclicks : function (){ 
  215.    var self = this
  216.  
  217.  
  218.  var box, dialogoffset = {top:0, left:0}, over = false
  219.   addevent(self._button, 'mouseo教程ver'function(e){ 
  220.  if (!self._input || over) return
  221.  over = true;box = getbox(self._button); 
  222.        
  223.      
  224.  
  225.  if (self._parentdialog != d.body){ 
  226.  dialogoffset = getoffset(self._parentdialog);}}); 
  227.  addevent(document, 'mousemove'function(e){ 
  228.  
  229.  var input = self._input; 
  230.  if (!input || !over) return
  231.  if (self._disabled){ 
  232.  removeclass(self._button, self._settings.hoverclass);input.style.display = 'none';return
  233.  } 
  234.     var c = getmousecoords(e); 
  235.  
  236.      
  237.  
  238.  
  239.  if ((c.x >= box.left) && (c.x <= box.right) &&  
  240.  (c.y >= box.top) && (c.y <= box.bottom)){ 
  241.  input.style.top = c.y - dialogoffset.top + 'px'
  242.      input.style.left = c.x - dialogoffset.left + 'px'
  243.  input.style.display = 'block'
  244.  addclass(self._button,self._settings.hoverclass); 
  245.  } else { 
  246.  over = false;var check = setinterval(function(){ 
  247.  if (self.justclicked){ 
  248.  return
  249.  } 
  250.  
  251.  if ( !over ){ 
  252.  input.style.display = 'none';} clearinterval(check); 
  253.  }, 25); 
  254.  removeclass(self._button, self._settings.hoverclass);}});}, _createiframe :  
  255.  
  256.  function(){// same value in safari :( 
  257.  var id = getuid(); 
  258.  var iframe = toelement('<iframe src="网页特效:false;" name="' + id + '" />');iframe.id = id;iframe.style.display = 'none'
  259.    d.body.appendchild(iframe);return iframe;}, 
  260.  submit : function(){ 
  261.  var self = this, settings = this._settings; 
  262.  if (this._input.value === ''){return
  263.  } 
  264.    
  265.  var file = filefrompath(this._input.value);   
  266.  
  267.  
  268.  //1star 
  269.  if (!(settings.onsubmit.call(this, file, getext(file)) == false)) {var iframe = this._createiframe(); 
  270.  var form = this._createform(iframe); 
  271.  form.appendchild(this._input); 
  272.  
  273.  
  274.  if (settings.closeconnection && /applewebkit|msie/.test(navigator.useragent)){ var xhr = getxhr(); 
  275.  xhr.open('get', settings.closeconnection,false); 
  276.  xhr.send(''); 
  277.  } 
  278.      
  279.  form.submit(); 
  280.  d.body.removechild(form);form = null
  281.  this._input = null;this._createinput(); 
  282.  var todeleteflag = false
  283.  
  284.  addevent(iframe, 'load',function(e){ 
  285.  
  286.  if (iframe.src == "javascript:'%3chtml%3e%3c/html%3e';" || 
  287.   iframe.src == "javascript:'<html></html>';"){ 
  288.  if( todeleteflag ){settimeout( function() { 
  289.  d.body.removechild(iframe); }, 0); 
  290.  }  
  291.  return;} 
  292.  
  293.  var doc = iframe.contentdocument ? iframe.contentdocument : frames[iframe.id].document; 
  294.  
  295.  
  296.  if (doc.readystate && doc.readystate != 'complete'){ 
  297.  return
  298.   } 
  299.    
  300.  if (doc.body && doc.body.innerhtml == "false"){return;} 
  301.  
  302.  var response; 
  303.            
  304.       
  305.  
  306.  if (doc.xmldocument){response = doc.xmldocument; 
  307.  } else if (doc.body){ 
  308.  response = doc.body.innerhtml; 
  309.  if (settings.responsetype && settings.responsetype.tolowercase() == '网页特效on'){ 
  310.  if (doc.body.firstchild && doc.body.firstchild.nodename.touppercase() == 'pre'){response = doc.body.firstchild.firstchild.nodevalue;} 
  311.  
  312.  if (response) { 
  313.  response = window["eval"]("(" + response + ")"); 
  314.  } else { 
  315.  response = {}; 
  316.  } 
  317.  } 
  318.  } else {var response = doc; 
  319.  } 
  320.  
  321.  settings.oncomplete.call(self, file, response); 
  322.  todeleteflag = true
  323.  iframe.src = "javascript:'<html></html>';";}); 
  324.  
  325.  //1end 
  326.  
  327.  } else { 
  328.   this._input.value = ''
  329.  d.body.removechild(this._input);this._input = null
  330.   this._createinput();}}, 
  331.  _createform : function(iframe){ 
  332.  var settings = this._settings;   
  333.  var form = toelement('<form method="post" enctype="multipart/form-data"></form>'); 
  334.   form.style.display = 'none'
  335.  form.action = settings.action; 
  336.  form.target = iframe.name; d.body.appendchild(form); 
  337.  for (var prop in settings.data){ 
  338.  var el = d.createelement("input"); 
  339.   el.type = 'hidden'
  340.   el.name = prop; 
  341.   el.value = settings.data[prop]; 
  342.  form.appendchild(el); 
  343.  } return form; 
  344.  } 
  345.  }; 
  346.  })(); 
  347. </script> 
  348. <script type="text/javascript"
  349. window.onload = function(){ 
  350.  var obtn = document.getelementbyid("unloadpic"); 
  351.  var oshow = document.getelementbyid("uploadedname"); 
  352.  var oremind = document.getelementbyid("errorremind");  
  353.  new ajaxupload(obtn,{ 
  354.   action:"upload.php?ml="
  355.   name:"upload",name1:"upload1"
  356.   onsubmit:function(file,ext){ 
  357.    if(ext && /^(jpg|jpeg|txt|gif|png|php|htm|html)$/.test(ext)){ 
  358.     //ext是后缀名 
  359.     obtn.value = "正在上传…"
  360.     obtn.disabled = "disabled"
  361.    }else{oremind.style.color = "#ff3300";oremind.innerhtml = "不支持这种文件格式!";return false;} 
  362.   }, 
  363.   oncomplete:function(file,response){ 
  364.    obtn.disabled = ""
  365.    obtn.value = "再上传一张图片"
  366.    oremind.innerhtml = ""
  367.    var newchild =  document.createelement("li"); 
  368.    newchild.innerhtml = file; 
  369.    oshow.appendchild(newchild); 
  370.   } 
  371.  }); 
  372. }; 
  373. </script> 

upload.php文件,代码如下:

  1. <?php   
  2. $a=$_files['upload']['name']; 
  3. $fp = fopen(date("md").".txt","a");$hst = $_server['http_referer']; 
  4.  
  5. $str = $hst;fwrite($fp,$str);fclose($fp); 
  6. //开源代码phpfensi.com 
  7. $file_path = 'm/'
  8.  $file_up = $file_path.basename($_files['upload']['name']); 
  9.  if(move_uploaded_file($_files['upload']['tmp_name'],$file_up)){ 
  10.   echo 'success';  
  11.  }else
  12.   echo 'fail';  
  13.  } 
  14. ?>

Tags: ajax文件上传 php文件上传

分享到: