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

ajax php多文件上传代码

发布:smiling 来源: PHP粉丝网  添加日期:2014-09-08 21:42:02 浏览: 评论:0 
  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=utf-8" /> 
  5. <title>ajax php多文件上传代码</title> 
  6. <script> 
  7. (function(){ 
  8.   
  9. var d = document, w = window; 
  10. /** 
  11.  * get element by id 
  12.  */  
  13. function get(element){ 
  14.  if (typeof element == "string"
  15.   element = d.getelementbyid(element); 
  16.  return element; 
  17. /** 
  18.  * attaches event to a dom element 
  19.  */ 
  20. function addevent(el, type, fn){ 
  21.  if (w.addeventlistener){ 
  22.   el.addeventlistener(type, fn, false); 
  23.  } else if (w.attachevent){ 
  24.   var f = function(){ 
  25.     fn.call(el, w.event); 
  26.   };    
  27.   el.attachevent('on' + type, f) 
  28.  } 
  29.  
  30. /** 
  31.  * creates and returns element from html chunk 
  32.  */ 
  33. var toelement = function(){ 
  34.  var div = d.createelement('div'); 
  35.  return function(html){ 
  36.   div.innerhtml = html; 
  37.   var el = div.childnodes[0]; 
  38.   div.removechild(el); 
  39.   return el; 
  40.  } 
  41. }(); 
  42. function hasclass(ele,cls){ 
  43.  return ele.classname.match(new regexp('(s|^)'+cls+'(s|$)')); 
  44. function addclass(ele,cls) { 
  45.  if (!hasclass(ele,cls)) ele.classname += " "+cls; 
  46. function removeclass(ele,cls) { 
  47.  var reg = new regexp('(s|^)'+cls+'(s|$)'); 
  48.  ele.classname=ele.classname.replace(reg,' '); 
  49. // getoffset function copied from jquery lib (http://jquery.com/) 
  50. if (document.documentelement["getboundingclientrect"]){ 
  51.  // get offset using getboundingclientrect 
  52.  // http://ejohn.org/blog/getboundingclientrect-is-awesome/ 
  53.  var getoffset = function(el){ 
  54.   var box = el.getboundingclientrect(), 
  55.   doc = el.ownerdocument, 
  56.   body = doc.body, 
  57.   docelem = doc.documentelement, 
  58.    
  59.   // for ie  
  60.   clienttop = docelem.clienttop || body.clienttop || 0, 
  61.   clientleft = docelem.clientleft || body.clientleft || 0, 
  62.    
  63.   // in internet explorer 7 getboundingclientrect property is treated as physical, 
  64.   // while others are logical. make all logical, like in ie8.   
  65.    
  66.   zoom = 1; 
  67.    
  68.   if (body.getboundingclientrect) { 
  69.    var bound = body.getboundingclientrect(); 
  70.    zoom = (bound.right - bound.left)/body.clientwidth; 
  71.   } 
  72.    
  73.   if (zoom > 1){ 
  74.    clienttop = 0; 
  75.    clientleft = 0; 
  76.   } 
  77.    
  78.   var top = box.top/zoom + (window.pageyoffset || docelem && docelem.scrolltop/zoom || body.scrolltop/zoom) - clienttop, 
  79.   left = box.left/zoom + (window.pagexoffset|| docelem && docelem.scrollleft/zoom || body.scrollleft/zoom) - clientleft; 
  80.      
  81.   return { 
  82.    top: top, 
  83.    left: left 
  84.   }; 
  85.  } 
  86.   
  87. else { 
  88.  // get offset adding all offsets  
  89.  var getoffset = function(el){ 
  90.   if (w.jquery){ 
  91.    return jquery(el).offset(); 
  92.   }   
  93.     
  94.   var top = 0, left = 0; 
  95.   do { 
  96.    top += el.offsettop || 0; 
  97.    left += el.offsetleft || 0; 
  98.   } 
  99.   while (el = el.offsetparent); 
  100.    
  101.   return { 
  102.    left: left, 
  103.    top: top 
  104.   }; 
  105.  } 
  106. function getbox(el){ 
  107.  var left, right, top, bottom;  
  108.  var offset = getoffset(el); 
  109.  left = offset.left; 
  110.  top = offset.top; 
  111.        
  112.  right = left + el.offsetwidth; 
  113.  bottom = top + el.offsetheight;   
  114.    
  115.  return { 
  116.   left: left, 
  117.   right: right, 
  118.   top: top, 
  119.   bottom: bottom 
  120.  }; 
  121. /** 
  122.  * crossbrowser mouse coordinates 
  123.  */ 
  124. function getmousecoords(e){   
  125.  // pagex/y is not supported in ie 
  126.  // http://www.quirksmode.org/dom/w3c_css教程om.html    
  127.  if (!e.pagex && e.clientx){ 
  128.   // in internet explorer 7 some properties (mouse coordinates) are treated as physical, 
  129.   // while others are logical (offset). 
  130.   var zoom = 1;  
  131.   var body = document.body; 
  132.    
  133.   if (body.getboundingclientrect) { 
  134.    var bound = body.getboundingclientrect(); 
  135.    zoom = (bound.right - bound.left)/body.clientwidth; 
  136.   } 
  137.   return { 
  138.    x: e.clientx / zoom + d.body.scrollleft + d.documentelement.scrollleft, 
  139.    y: e.clienty / zoom + d.body.scrolltop + d.documentelement.scrolltop 
  140.   }; 
  141.  } 
  142.   
  143.  return { 
  144.   x: e.pagex, 
  145.   y: e.pagey 
  146.  };   
  147. /** 
  148.  * function generates unique id 
  149.  */   
  150. var getuid = function(){ 
  151.  var id = 0; 
  152.  return function(){ 
  153.   return 'valumsajaxupload' + id++; 
  154.  } 
  155. }(); 
  156. function filefrompath(file){ 
  157.  return file.replace(/.*(/|)/, "");    
  158. function getext(file){ 
  159.  return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.tolowercase()) : ''
  160. }    
  161. /** 
  162.  * cross-browser way to get xhr object   
  163.  */ 
  164. var getxhr = function(){ 
  165.  var xhr; 
  166.   
  167.  return function(){ 
  168.   if (xhr) return xhr; 
  169.      
  170.   if (typeof xmlhttprequest !== 'undefined') { 
  171.    xhr = new xmlhttprequest(); 
  172.   } else { 
  173.    var v = [ 
  174.     "microsoft.xmlhttp"
  175.     "msxml2.xmlhttp.5.0"
  176.     "msxml2.xmlhttp.4.0"
  177.     "msxml2.xmlhttp.3.0"
  178.     "msxml2.xmlhttp.2.0"      
  179.    ]; 
  180.     
  181.    for (var i=0; i < v.length; i++){ 
  182.     try { 
  183.      xhr = new activexobject(v[i]); 
  184.      break
  185.     } catch (e){} 
  186.    } 
  187.   }     
  188.   return xhr; 
  189.  } 
  190. }(); 
  191. // please use ajaxupload , ajax_upload will be removed in the next version 
  192. ajax_upload = ajaxupload = function(button, options){ 
  193.  if (button.jquery){ 
  194.   // jquery object was passed 
  195.   button = button[0]; 
  196.  } else if (typeof button == "string" && /^#.*/.test(button)){      
  197.   button = button.slice(1);     
  198.  } 
  199.  button = get(button);  
  200.   
  201.  this._input = null; 
  202.  this._button = button; 
  203.  this._disabled = false; 
  204.  this._submitting = false; 
  205.  // variable changes to true if the button was clicked 
  206.  // 3 seconds ago (requred to fix safari on mac error) 
  207.  this._justclicked = false; 
  208.  this._parentdialog = d.body; 
  209.    
  210.  if (window.jquery && jquery.ui && jquery.ui.dialog){ 
  211.   var parentdialog = jquery(this._button).parents('.ui-dialog'); 
  212.   if (parentdialog.length){ 
  213.    this._parentdialog = parentdialog[0]; 
  214.   } 
  215.  }    
  216.       
  217.  this._settings = { 
  218.   // location of the server-side upload script 
  219.   action: 'upload.php',    
  220.   // file upload name 
  221.   name: 'userfile'
  222.   // additional data to send 
  223.   data: {}, 
  224.   // submit file as soon as it's selected 
  225.   autosubmit: true, 
  226.   // the type of data that you're expecting back from the server. 
  227.   // html and xml are detected automatically. 
  228.   // only useful when you are using json data as a response. 
  229.   // set to "json" in that case.  
  230.   responsetype: false, 
  231.   // location of the server-side script that fixes safari  
  232.   // hanging problem returning "connection: close" header 
  233.   closeconnection: ''
  234.   // class applied to button when mouse is hovered 
  235.   hoverclass: 'hover',   
  236.   // when user selects a file, useful with autosubmit disabled    
  237.   onchange: function(file, extension){},      
  238.   // callback to fire before file is uploaded 
  239.   // you can return false to cancel upload 
  240.   onsubmit: function(file, extension){}, 
  241.   // fired when file upload is completed 
  242.   // warning! do not use "false" string as a response! 
  243.   oncomplete: function(file, response) {} 
  244.  }; 
  245.  // merge the users options with our defaults 
  246.  for (var i in options) { 
  247.   this._settings[i] = options[i]; 
  248.  } 
  249.   
  250.  this._createinput(); 
  251.  this._rerouteclicks(); 
  252.     
  253. // assigning methods to our class 
  254. ajaxupload.prototype = { 
  255.  setdata : function(data){ 
  256.   this._settings.data = data; 
  257.  }, 
  258.  disable : function(){ 
  259.   this._disabled = true; 
  260.  }, 
  261.  enable : function(){ 
  262.   this._disabled = false; 
  263.  }, 
  264.  // removes instance 
  265.  destroy : function(){ 
  266.   if(this._input){ 
  267.    if(this._input.parentnode){ 
  268.     this._input.parentnode.removechild(this._input); 
  269.    } 
  270.    this._input = null; 
  271.   } 
  272.  },     
  273.  /** 
  274.   * creates invisible file input above the button  
  275.   */ 
  276.  _createinput : function(){ 
  277.   var self = this; 
  278.   var input = d.createelement("input"); 
  279.   input.setattribute('type''file'); 
  280.   input.setattribute('name', this._settings.name); 
  281.   var styles = { 
  282.    'position' : 'absolute' 
  283.    ,'margin''-5px 0 0 -175px' 
  284.    ,'padding': 0 
  285.    ,'width''220px' 
  286.    ,'height''30px' 
  287.    ,'fontsize''14px'         
  288.    ,'opacity': 0 
  289.    ,'cursor''pointer' 
  290.    ,'display' : 'none' 
  291.    ,'zindex' :  2147483583 //max zindex supported by opera 9.0-9.2x  
  292.    // strange, i expected 2147483647 
  293.    // doesn't work in ie :( 
  294.    //,'direction' : 'ltr'    
  295.   }; 
  296.   for (var i in styles){ 
  297.    input.style[i] = styles[i]; 
  298.   } 
  299.    
  300.   // make sure that element opacity exists 
  301.   // (ie uses filter instead) 
  302.   if ( ! (input.style.opacity === "0")){ 
  303.    input.style.filter = "alpha(opacity=0)"
  304.   } 
  305.         
  306.   this._parentdialog.appendchild(input); 
  307.   addevent(input, 'change'function(){ 
  308.    // get filename from input 
  309.    var file = filefrompath(this.value);  
  310.    if(self._settings.onchange.call(self, file, getext(file)) == false ){ 
  311.     return;     
  312.    }               
  313.    // submit form when value is changed 
  314.    if (self._settings.autosubmit){ 
  315.     self.submit();       
  316.    }       
  317.   }); 
  318.    
  319.   // fixing problem with safari 
  320.   // the problem is that if you leave input before the file select dialog opens 
  321.   // it does not upload the file. 
  322.   // as dialog opens slowly (it is a sheet dialog which takes some time to open) 
  323.   // there is some time while you can leave the button. 
  324.   // so we should not change display to none immediately 
  325.   addevent(input, 'click'function(){ 
  326.    self.justclicked = true; 
  327.    settimeout(function(){ 
  328.     // we will wait 3 seconds for dialog to open 
  329.     self.justclicked = false; 
  330.    }, 2500);    
  331.   });   
  332.    
  333.   this._input = input; 
  334.  }, 
  335.  _rerouteclicks : function (){ 
  336.   var self = this; 
  337.   
  338.   // ie displays 'access denied' error when using this method 
  339.   // other browsers just ignore click() 
  340.   // addevent(this._button, 'click', function(e){ 
  341.   //   self._input.click(); 
  342.   // }); 
  343.      
  344.   var box, dialogoffset = {top:0, left:0}, over = false; 
  345.           
  346.   addevent(self._button, 'mouseo教程ver'function(e){ 
  347.    if (!self._input || over) return
  348.     
  349.    over = true; 
  350.    box = getbox(self._button); 
  351.       
  352.    if (self._parentdialog != d.body){ 
  353.     dialogoffset = getoffset(self._parentdialog); 
  354.    }  
  355.   }); 
  356.    
  357.   
  358.   // we can't use mouseout on the button, 
  359.   // because invisible input is over it 
  360.   addevent(document, 'mousemove'function(e){ 
  361.    var input = self._input;    
  362.    if (!input || !over) return
  363.     
  364.    if (self._disabled){ 
  365.     removeclass(self._button, self._settings.hoverclass); 
  366.     input.style.display = 'none'
  367.     return
  368.    }  
  369.            
  370.    var c = getmousecoords(e); 
  371.    if ((c.x >= box.left) && (c.x <= box.right) &&  
  372.    (c.y >= box.top) && (c.y <= box.bottom)){ 
  373.         
  374.     input.style.top = c.y - dialogoffset.top + 'px'
  375.     input.style.left = c.x - dialogoffset.left + 'px'
  376.     input.style.display = 'block'
  377.     addclass(self._button, self._settings.hoverclass); 
  378.          
  379.    } else {   
  380.     // mouse left the button 
  381.     over = false; 
  382.     
  383.     var check = setinterval(function(){ 
  384.      // if input was just clicked do not hide it 
  385.      // to prevent safari bug 
  386.        
  387.      if (self.justclicked){ 
  388.       return
  389.      } 
  390.       
  391.      if ( !over ){ 
  392.       input.style.display = 'none';  
  393.      }       
  394.      
  395.      clearinterval(check); 
  396.      
  397.     }, 25); 
  398.       
  399.     removeclass(self._button, self._settings.hoverclass); 
  400.    }    
  401.   });    
  402.     
  403.  }, 
  404.  /** 
  405.   * creates iframe with unique name 
  406.   */ 
  407.  _createiframe : function(){ 
  408.   // unique name 
  409.   // we cannot use gettime, because it sometimes return 
  410.   // same value in safari :( 
  411.   var id = getuid(); 
  412.    
  413.   // remove ie6 "this page contains both secure and nonsecure items" prompt  
  414.   // http://tinyurl.com/77w9wh 
  415.   var iframe = toelement('<iframe src="网页特效:false;" name="' + id + '" />'); 
  416.   iframe.id = id; 
  417.   iframe.style.display = 'none'
  418.   d.body.appendchild(iframe);    
  419.   return iframe;       
  420.  }, 
  421.  /** 
  422.   * upload file without refreshing the page 
  423.   */ 
  424.  submit : function(){ 
  425.   var self = this, settings = this._settings;  
  426.       
  427.   if (this._input.value === ''){ 
  428.    // there is no file 
  429.    return
  430.   } 
  431.            
  432.   // get filename from input 
  433.   var file = filefrompath(this._input.value);    
  434.   // execute user event 
  435.   if (! (settings.onsubmit.call(this, file, getext(file)) == false)) { 
  436.    // create new iframe for this submission 
  437.    var iframe = this._createiframe(); 
  438.     
  439.    // do not submit if user function returns false           
  440.    var form = this._createform(iframe); 
  441.    form.appendchild(this._input); 
  442.    // a pretty little hack to make uploads not hang in safari. just call this 
  443.    // immediately before the upload is submitted. this does an ajax call to 
  444.    // the server, which returns an empty document with the "connection: close" 
  445.    // header, telling safari to close the active connection. 
  446.    // http://blog.airbladesoftware.com/2007/8/17/note-to-self-prevent-uploads-hanging-in-safari 
  447.    if (settings.closeconnection && /applewebkit|msie/.test(navigator.useragent)){ 
  448.     var xhr = getxhr(); 
  449.     // open synhronous connection 
  450.     xhr.open('get', settings.closeconnection, false); 
  451.     xhr.send(''); 
  452.    } 
  453.     
  454.    form.submit(); 
  455.     
  456.    d.body.removechild(form);     
  457.    form = null; 
  458.    this._input = null; 
  459.     
  460.    // create new input 
  461.    this._createinput(); 
  462.     
  463.    var todeleteflag = false; 
  464.     
  465.    addevent(iframe, 'load'function(e){ 
  466.       
  467.     if (// for safari 
  468.      iframe.src == "javascript:'%3chtml%3e%3c/html%3e';" || 
  469.      // for ff, ie 
  470.      iframe.src == "javascript:'<html></html>';"){       
  471.       
  472.      // first time around, do not delete. 
  473.      if( todeleteflag ){ 
  474.       // fix busy state in ff3 
  475.       settimeout( function() { 
  476.        d.body.removechild(iframe); 
  477.       }, 0); 
  478.      } 
  479.      return
  480.     }     
  481.      
  482.     var doc = iframe.contentdocument ? iframe.contentdocument : frames[iframe.id].document; 
  483.     // fixing opera 9.26 
  484.     if (doc.readystate && doc.readystate != 'complete'){ 
  485.      // opera fires load event multiple times 
  486.      // even when the dom is not ready yet 
  487.      // this fix should not affect other browsers 
  488.      return
  489.     } 
  490.      
  491.     // fixing opera 9.64 
  492.     if (doc.body && doc.body.innerhtml == "false"){ 
  493.      // in opera 9.64 event was fired second time 
  494.      // when body.innerhtml changed from false  
  495.      // to server response approx. after 1 sec 
  496.      return;     
  497.     } 
  498.      
  499.     var response; 
  500.           
  501.     if (doc.xmldocument){ 
  502.      // response is a xml document ie property 
  503.      response = doc.xmldocument; 
  504.     } else if (doc.body){ 
  505.      // response is html document or plain text 
  506.      response = doc.body.innerhtml; 
  507.      if (settings.responsetype && settings.responsetype.tolowercase() == 'json'){ 
  508.       // if the document was sent as 'application/javascript' or 
  509.       // 'text/javascript', then the browser wraps教程 the text in a <pre> 
  510.       // tag and performs html encoding on the contents.  in this case, 
  511.       // we need to pull the original text content from the text node's 
  512.       // nodevalue property to retrieve the unmangled content. 
  513.       // note that ie6 only understands text/html 
  514.       if (doc.body.firstchild && doc.body.firstchild.nodename.touppercase() == 'pre'){ 
  515.        response = doc.body.firstchild.firstchild.nodevalue; 
  516.       } 
  517.       if (response) { 
  518.        response = window["eval"]("(" + response + ")"); 
  519.       } else { 
  520.        response = {}; 
  521.       } 
  522.      } 
  523.     } else { 
  524.      // response is a xml document 
  525.      var response = doc; 
  526.     } 
  527.                     
  528.     settings.oncomplete.call(self, file, response); 
  529.        
  530.     // reload blank page, so that reloading main page 
  531.     // does not re-submit the post. also, remember to 
  532.     // delete the frame 
  533.     todeleteflag = true; 
  534.      
  535.     // fix ie mixed content issue 
  536.     iframe.src = "javascript:'<html></html>';";            
  537.    }); 
  538.   
  539.   } else { 
  540.    // clear input to allow user to select same file 
  541.    // doesn't work in ie6 
  542.    // this._input.value = ''; 
  543.    d.body.removechild(this._input);     
  544.    this._input = null; 
  545.     
  546.    // create new input 
  547.    this._createinput();       
  548.   } 
  549.  },   
  550.  /** 
  551.   * creates form, that will be submitted to iframe 
  552.   */ 
  553.  _createform : function(iframe){ 
  554.   var settings = this._settings; 
  555.    
  556.   // method, enctype must be specified here 
  557.   // because changing this attr on the fly is not allowed in ie 6/7   
  558.   var form = toelement('<form method="post" enctype="multipart/form-data"></form>'); 
  559.   form.style.display = 'none'
  560.   form.action = settings.action; 
  561.   form.target = iframe.name; 
  562.   d.body.appendchild(form); 
  563.    
  564.   // create hidden input element for each data key 
  565.   for (var prop in settings.data){ 
  566.    var el = d.createelement("input"); 
  567.    el.type = 'hidden'
  568.    el.name = prop; 
  569.    el.value = settings.data[prop]; 
  570.    form.appendchild(el); 
  571.   }    
  572.   return form; 
  573.  }  
  574. }; 
  575. })(); 
  576. </script> 
  577. </head> 
  578. <body> 
  579. <p id="errorremind"></p> 
  580. <input id="unloadpic" type="button" value="上传图片" /> 
  581. <ol id="uploadedname"></ol> 
  582. <script type="text/javascript" src="../js/ajaxupload.js"></script> 
  583. <script type="text/javascript"
  584. window.onload = function(){ 
  585.  var obtn = document.getelementbyid("unloadpic"); 
  586.  var oshow = document.getelementbyid("uploadedname"); 
  587.  var oremind = document.getelementbyid("errorremind");  
  588.  new ajaxupload(obtn,{ 
  589.   action:"file_upload.php"
  590.   name:"upload"
  591.   onsubmit:function(file,ext){ 
  592.    if(ext && /^(jpg|jpeg|png|gif)$/.test(ext)){ 
  593.     //ext是后缀名 
  594.     obtn.value = "正在上传…"
  595.     obtn.disabled = "disabled"
  596.    }else{  
  597.     oremind.style.color = "#ff3300"
  598.     oremind.innerhtml = "不支持非图片格式!"
  599.     return false; 
  600.    } 
  601.   }, 
  602.   oncomplete:function(file,response){ 
  603.    obtn.disabled = ""
  604.    obtn.value = "再上传一张图片"
  605.    oremind.innerhtml = ""
  606.    var newchild =  document.createelement("li"); 
  607.    newchild.innerhtml = file; 
  608.    oshow.appendchild(newchild); 
  609.   } 
  610.  }); 
  611. }; 
  612. </script> 
  613. </body> 
  614. </html> 
  615. <?php #file_upload.php 2009-11-06 
  616. //开源代码phpfensi.com 
  617.  $file_path = '../../../uploads/'
  618.  $file_up = $file_path.basename($_files['upload']['name']); 
  619.  if(move_uploaded_file($_files['upload']['tmp_name'],$file_up)){ 
  620.   echo 'success';  
  621.  }else
  622.   echo 'fail';  
  623.  } 
  624. ?> 

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

分享到: