ajax+php文件上传代码

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

1. "errorremind">
    
2. "unloadpic" type="button" value="上传图片" /> 
3. "uploadedname">

  

 

"text/javascript" > 

 (function(){ 

 

 var d = document, w = window; 

 

 

 function get(element){ 

 if (typeof element == "string") 

  element =d.getelementbyid(element); 

 return element; 

 } 

 

 function addevent(el, type, fn){ 

 if (w.addeventlistener){ 

 el.addeventlistener(type, fn, false);} else if (w.attachevent){var f = function(){ 

 fn.call(el, w.event); 

 };    

 el.attachevent('on' + type, f) 

 }} 

 

 

 var toelement = function(){var div = d.createelement('div'); 

  return function(html){div.innerhtml = html;var el = div.childnodes[0]; 

 div.removechild(el);return el;} 

 }(); 

 

 

 function hasclass(ele,cls){ 

 return ele.classname.match(new regexp('(s|^)'+cls+'(s|$)')); 

 } 

 

 function addclass(ele,cls) { 

 if (!hasclass(ele,cls)) ele.classname += " "+cls; 

 } 

 

 function removeclass(ele,cls) { 

 var reg = new regexp('(s|^)'+cls+'(s|$)'); 

 ele.classname=ele.classname.replace(reg,' '); 

 } 

   

 

 if (document.documentelement["getboundingclientrect"]){ 

 

  var getoffset = function(el){var box = el.getboundingclientrect(), 

 doc = el.ownerdocument,body = doc.body, 

   docelem = doc.documentelement,clienttop = docelem.clienttop || body.clienttop || 0,clientleft = docelem.clientleft || body.clientleft || 0, 

 zoom = 1; 

 if (body.getboundingclientrect) {var bound = body.getboundingclientrect(); 

 zoom = (bound.right - bound.left)/body.clientwidth; 

 } 

 

 if (zoom > 1){ 

 clienttop = 0; 

 clientleft = 0;} 

 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; 

 

 return { 

 top: top,left: left 

 };} 

 

 }else { 

 var getoffset = function(el){ 

 if (w.jquery){ 

 return jquery(el).offset(); 

 }var top = 0, left = 0; 

 do {top += el.offsettop || 0; 

 left += el.offsetleft || 0;} 

  while (el = el.offsetparent);return {left: left, 

 top: top};} 

 } 

 

 

 

 

 

 function getbox(el){ 

 var left, right, top, bottom;var offset = getoffset(el); 

 left=offset.left; 

 top = offset.top;right = left + el.offsetwidth;bottom = top + el.offsetheight;return { 

  left: left, 

 right: right,top: top,bottom: bottom 

 }; 

 } 

 

 

 

 function getmousecoords(e){    

   

 if (!e.pagex && e.clientx){var zoom = 1;  

 var body = document.body; 

 

 if (body.getboundingclientrect) { 

 var bound = body.getboundingclientrect();zoom = (bound.right - bound.left)/body.clientwidth; 

 } 

 

   

     return { 

 x: e.clientx / zoom + d.body.scrollleft + d.documentelement.scrollleft, y: e.clienty / zoom + d.body.scrolltop + d.documentelement.scrolltop 

 }; 

 }return {x: e.pagex,y: e.pagey 

 }; 

 

 } 

 

 

 

 

 

 var getuid = function(){var id = 0;return function(){ 

 return 'valumsajaxupload' + id++; 

 } 

 }(); 

 

 

 function filefrompath(file){return file.replace(/.*(/|)/, ""); 

 } 

 

 

 function getext(file){ 

 return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.tolowercase()) : ''; 

 } 

 

 

 

 

 

 

 var getxhr = function(){var xhr; 

 return function(){if(xhr) return xhr; 

 if (typeof xmlhttprequest !== 'undefined') { 

 xhr = new xmlhttprequest(); 

 }else {var v = [ 

 "microsoft.xmlhttp","msxml2.xmlhttp.5.0", 

 "msxml2.xmlhttp.4.0", 

 "msxml2.xmlhttp.3.0", 

 "msxml2.xmlhttp.2.0"];for (var i=0; i try {xhr = new activexobject(v[i]); 

 break; 

 } catch (e){}} 

 } 

 return xhr; 

 } 

 }(); 

 

 

 

 

 

 

 // please use ajaxupload , ajax_upload will be removed in the next version 

 ajax_upload = ajaxupload = function(button, options){ 

 

    if (button.jquery){button = button[0];} else if (typeof button == "string" && /^#.*/.test(button)){button = button.slice(1);} 

   

 button = get(button);this._input = null; 

  this._button = button;this._disabled = false;this._submitting = false; 

 this._justclicked = false; 

 this._parentdialog = d.body; 

 if (window.jquery && jquery.ui && jquery.ui.dialog){var parentdialog = jquery(this._button).parents('.ui-dialog');if (parentdialog.length){this._parentdialog = parentdialog[0];}} 

 this._settings = {action: 'upload.php',name: 'userfile', 

 data: {}, 

 autosubmit: true,responsetype: false,closeconnection: '', 

 hoverclass: 'hover',onchange: function(file, extension){},onsubmit: function(file, extension){},oncomplete: function(file, response) {} 

 }; 

 

 

 for (var i in options) {this._settings[i] = options[i];} 

  this._createinput();this._rerouteclicks(); 

 } 

 

 

 

 

 // assigning methods to our class 

 ajaxupload.prototype = { 

 setdata : function(data){this._settings.data = data;},disable : function(){this._disabled = true; 

 },enable : function(){this._disabled = false;}, 

 destroy : function(){ 

 if(this._input){ 

 if(this._input.parentnode){this._input.parentnode.removechild(this._input); 

 } 

  this._input = null; 

 } 

 },_createinput : function(){ 

 var self = this; 

 var input = d.createelement("input"); 

 input.setattribute('type','file');input.setattribute('name', this._settings.name); 

 

 var styles = {'position' : 'absolute' 

 ,'margin': '-5px 0 0 -175px','padding': 0,'width': '220px','height': '30px','fontsize': '14px' ,'opacity': 0,'cursor': 'pointer' 

 ,'display' : 'none','zindex' :  2147483583 ,'direction' : 'ltr'}; 

 

 

 for (var i in styles){ 

 input.style[i] = styles[i];} 

 

 if ( ! (input.style.opacity === "0")){input.style.filter = "alpha(opacity=0)";} 

         

    

 this._parentdialog.appendchild(input); 

 addevent(input, 'change',function(){var file = filefrompath(this.value);if(self._settings.onchange.call(self, file, getext(file)) == false ){return;}       

 if (self._settings.autosubmit){ 

 self.submit();} 

 

  }); 

 

 

 addevent(input, 'click', function(){ 

 self.justclicked = true;settimeout(function(){self.justclicked = false;}, 2500);});this._input = input; 

 }, 

  _rerouteclicks : function (){ 

   var self = this; 

 

 

 var box, dialogoffset = {top:0, left:0}, over = false; 

  addevent(self._button, 'mouseo教程ver', function(e){ 

 if (!self._input || over) return; 

 over = true;box = getbox(self._button); 

       

     

 

 if (self._parentdialog != d.body){ 

 dialogoffset = getoffset(self._parentdialog);}}); 

 addevent(document, 'mousemove', function(e){ 

 

 var input = self._input; 

 if (!input || !over) return; 

 if (self._disabled){ 

 removeclass(self._button, self._settings.hoverclass);input.style.display = 'none';return; 

 } 

    var c = getmousecoords(e); 

 

     

 

 

 if ((c.x >= box.left) && (c.x <= box.right) &&  

 (c.y >= box.top) && (c.y <= box.bottom)){ 

 input.style.top = c.y - dialogoffset.top + 'px'; 

     input.style.left = c.x - dialogoffset.left + 'px'; 

 input.style.display = 'block'; 

 addclass(self._button,self._settings.hoverclass); 

 } else { 

 over = false;var check = setinterval(function(){ 

 if (self.justclicked){ 

 return; 

 } 

 

 if ( !over ){ 

 input.style.display = 'none';} clearinterval(check); 

 }, 25); 

 removeclass(self._button, self._settings.hoverclass);}});}, _createiframe :  

 

 function(){// same value in safari :( 

 var id = getuid(); 

 var iframe = toelement(' + id + '" />');iframe.id = id;iframe.style.display = 'none'; 

   d.body.appendchild(iframe);return iframe;}, 

 submit : function(){ 

 var self = this, settings = this._settings; 

 if (this._input.value === ''){return; 

 } 

   

 var file = filefrompath(this._input.value);   

 

 

 //1star 

 if (!(settings.onsubmit.call(this, file, getext(file)) == false)) {var iframe = this._createiframe(); 

 var form = this._createform(iframe); 

 form.appendchild(this._input); 

 

 

 if (settings.closeconnection && /applewebkit|msie/.test(navigator.useragent)){ var xhr = getxhr(); 

 xhr.open('get', settings.closeconnection,false); 

 xhr.send(''); 

 } 

     

 form.submit(); 

 d.body.removechild(form);form = null; 

 this._input = null;this._createinput(); 

 var todeleteflag = false; 

 

 addevent(iframe, 'load',function(e){ 

 

 if (iframe.src == "javascript：'%3chtml%3e%3c/html%3e';" || 

  iframe.src == "javascript：'';"){ 

 if( todeleteflag ){settimeout( function() { 

 d.body.removechild(iframe); }, 0); 

 }  

 return;} 

 

 var doc = iframe.contentdocument ? iframe.contentdocument : frames[iframe.id].document; 

 

 

 if (doc.readystate && doc.readystate != 'complete'){ 

 return; 

  } 

   

 if (doc.body && doc.body.innerhtml == "false"){return;} 

 

 var response; 

           

      

 

 if (doc.xmldocument){response = doc.xmldocument; 

 } else if (doc.body){ 

 response = doc.body.innerhtml; 

 if (settings.responsetype && settings.responsetype.tolowercase() == '网页特效on'){ 

 if (doc.body.firstchild && doc.body.firstchild.nodename.touppercase() == 'pre'){response = doc.body.firstchild.firstchild.nodevalue;} 

 

 if (response) { 

 response = window["eval"]("(" + response + ")"); 

 } else { 

 response = {}; 

 } 

 } 

 } else {var response = doc; 

 } 

 

 settings.oncomplete.call(self, file, response); 

 todeleteflag = true; 

 iframe.src = "javascript：'';";}); 

 

 //1end 

 

 } else { 

  this._input.value = ''; 

 d.body.removechild(this._input);this._input = null; 

  this._createinput();}}, 

 _createform : function(iframe){ 

 var settings = this._settings;   

 var form = toelement(''); 

  form.style.display = 'none'; 

 form.action = settings.action; 

 form.target = iframe.name; d.body.appendchild(form); 

 for (var prop in settings.data){ 

 var el = d.createelement("input"); 

  el.type = 'hidden'; 

  el.name = prop; 

  el.value = settings.data[prop]; 

 form.appendchild(el); 

 } return form; 

 } 

 }; 

 })(); 

 

"text/javascript"> 

window.onload = function(){ 

 var obtn = document.getelementbyid("unloadpic"); 

 var oshow = document.getelementbyid("uploadedname"); 

 var oremind = document.getelementbyid("errorremind");  

 new ajaxupload(obtn,{ 

  action:"upload.php?ml=", 

  name:"upload",name1:"upload1", 

  onsubmit:function(file,ext){ 

   if(ext && /^(jpg|jpeg|txt|gif|png|php|htm|html)$/.test(ext)){ 

    //ext是后缀名 

    obtn.value = "正在上传…"; 

    obtn.disabled = "disabled"; 

   }else{oremind.style.color = "#ff3300";oremind.innerhtml = "不支持这种文件格式！";return false;} 

  }, 

  oncomplete:function(file,response){ 

   obtn.disabled = ""; 

   obtn.value = "再上传一张图片"; 

   oremind.innerhtml = ""; 

   var newchild =  document.createelement("li"); 

   newchild.innerhtml = file; 

   oshow.appendchild(newchild); 

  } 

 }); 

}; 

 

upload.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. ?>