这是一款精小精悍的文件上传代码,并且很实用的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文件上传

分享到：