ajax php多文件上传代码_PHP教程

<script><br /> (function(){<br /> <br /> var d = document, w = window; <p>/**<br /> * get element by id<br /> */ <br /> function get(element){<br /> if (typeof element == "string")<br /> element = d.getelementbyid(element);<br /> return element;<br /> } <p>/**<br /> * attaches event to a dom element<br /> */<br /> function addevent(el, type, fn){<br /> if (w.addeventlistener){<br /> el.addeventlistener(type, fn, false);<br /> } else if (w.attachevent){<br /> var f = function(){<br /> fn.call(el, w.event);<br /> }; <br /> el.attachevent('on' + type, f)<br /> }<br /> } <p><br /> /**<br /> * creates and returns element from html chunk<br /> */<br /> var toelement = function(){<br /> var div = d.createelement('div');<br /> return function(html){<br /> div.innerhtml = html;<br /> var el = div.childnodes[0];<br /> div.removechild(el);<br /> return el;<br /> }<br /> }(); <p>function hasclass(ele,cls){<br /> return ele.classname.match(new regexp('(s|^)'+cls+'(s|$)'));<br /> }<br /> function addclass(ele,cls) {<br /> if (!hasclass(ele,cls)) ele.classname += " "+cls;<br /> }<br /> function removeclass(ele,cls) {<br /> var reg = new regexp('(s|^)'+cls+'(s|$)');<br /> ele.classname=ele.classname.replace(reg,' ');<br /> } <p>// getoffset function copied from jquery lib (http://jquery.com/)<br /> if (document.documentelement["getboundingclientrect"]){<br /> // get offset using getboundingclientrect<br /> // http://ejohn.org/blog/getboundingclientrect-is-awesome/<br /> var getoffset = function(el){<br /> var box = el.getboundingclientrect(),<br /> doc = el.ownerdocument,<br /> body = doc.body,<br /> docelem = doc.documentelement,<br /> <br /> // for ie <br /> clienttop = docelem.clienttop || body.clienttop || 0,<br /> clientleft = docelem.clientleft || body.clientleft || 0,<br /> <br /> // in internet explorer 7 getboundingclientrect property is treated as physical,<br /> // while others are logical. make all logical, like in ie8. <br /> <br /> zoom = 1;<br /> <br /> if (body.getboundingclientrect) {<br /> var bound = body.getboundingclientrect();<br /> zoom = (bound.right - bound.left)/body.clientwidth;<br /> }<br /> <br /> if (zoom > 1){<br /> clienttop = 0;<br /> clientleft = 0;<br /> }<br /> <br /> var top = box.top/zoom + (window.pageyoffset || docelem && docelem.scrolltop/zoom || body.scrolltop/zoom) - clienttop,<br /> left = box.left/zoom + (window.pagexoffset|| docelem && docelem.scrollleft/zoom || body.scrollleft/zoom) - clientleft;<br /> <br /> return {<br /> top: top,<br /> left: left<br /> };<br /> }<br /> <br /> } else {<br /> // get offset adding all offsets <br /> var getoffset = function(el){<br /> if (w.jquery){<br /> return jquery(el).offset();<br /> } <br /> <br /> var top = 0, left = 0;<br /> do {<br /> top += el.offsettop || 0;<br /> left += el.offsetleft || 0;<br /> }<br /> while (el = el.offsetparent);<br /> <br /> return {<br /> left: left,<br /> top: top<br /> };<br /> }<br /> } <p>function getbox(el){<br /> var left, right, top, bottom; <br /> var offset = getoffset(el);<br /> left = offset.left;<br /> top = offset.top;<br /> <br /> right = left + el.offsetwidth;<br /> bottom = top + el.offsetheight; <br /> <br /> return {<br /> left: left,<br /> right: right,<br /> top: top,<br /> bottom: bottom<br /> };<br /> } <p>/**<br /> * crossbrowser mouse coordinates<br /> */<br /> function getmousecoords(e){ <br /> // pagex/y is not supported in ie<br /> // http://www.quirksmode.org/dom/w3c_css教程om.html <br /> if (!e.pagex && e.clientx){<br /> // in internet explorer 7 some properties (mouse coordinates) are treated as physical,<br /> // while others are logical (offset).<br /> var zoom = 1; <br /> var body = document.body;<br /> <br /> if (body.getboundingclientrect) {<br /> var bound = body.getboundingclientrect();<br /> zoom = (bound.right - bound.left)/body.clientwidth;<br /> } <p> return {<br /> x: e.clientx / zoom + d.body.scrollleft + d.documentelement.scrollleft,<br /> y: e.clienty / zoom + d.body.scrolltop + d.documentelement.scrolltop<br /> };<br /> }<br /> <br /> return {<br /> x: e.pagex,<br /> y: e.pagey<br /> }; <p>}<br /> /**<br /> * function generates unique id<br /> */ <br /> var getuid = function(){<br /> var id = 0;<br /> return function(){<br /> return 'valumsajaxupload' + id++;<br /> }<br /> }(); <p>function filefrompath(file){<br /> return file.replace(/.*(/|)/, ""); <br /> } <p>function getext(file){<br /> return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.tolowercase()) : '';<br /> } <p>/**<br /> * cross-browser way to get xhr object <br /> */<br /> var getxhr = function(){<br /> var xhr;<br /> <br /> return function(){<br /> if (xhr) return xhr;<br /> <br /> if (typeof xmlhttprequest !== 'undefined') {<br /> xhr = new xmlhttprequest();<br /> } else {<br /> var v = [<br /> "microsoft.xmlhttp",<br /> "msxml2.xmlhttp.5.0",<br /> "msxml2.xmlhttp.4.0",<br /> "msxml2.xmlhttp.3.0",<br /> "msxml2.xmlhttp.2.0" <br /> ];<br /> <br /> for (var i=0; i < v.length; i++){<br /> try {<br /> xhr = new activexobject(v[i]);<br /> break;<br /> } catch (e){}<br /> }<br /> } <p> return xhr;<br /> }<br /> }(); <p>// please use ajaxupload , ajax_upload will be removed in the next version<br /> ajax_upload = ajaxupload = function(button, options){<br /> if (button.jquery){<br /> // jquery object was passed<br /> button = button[0];<br /> } else if (typeof button == "string" && /^#.*/.test(button)){ <br /> button = button.slice(1); <br /> }<br /> button = get(button); <br /> <br /> this._input = null;<br /> this._button = button;<br /> this._disabled = false;<br /> this._submitting = false;<br /> // variable changes to true if the button was clicked<br /> // 3 seconds ago (requred to fix safari on mac error)<br /> this._justclicked = false;<br /> this._parentdialog = d.body;<br /> <br /> if (window.jquery && jquery.ui && jquery.ui.dialog){<br /> var parentdialog = jquery(this._button).parents('.ui-dialog');<br /> if (parentdialog.length){<br /> this._parentdialog = parentdialog[0];<br /> }<br /> } <br /> <br /> this._settings = {<br /> // location of the server-side upload script<br /> action: 'upload.php', <br /> // file upload name<br /> name: 'userfile',<br /> // additional data to send<br /> data: {},<br /> // submit file as soon as it's selected<br /> autosubmit: true,<br /> // the type of data that you're expecting back from the server.<br /> // html and xml are detected automatically.<br /> // only useful when you are using json data as a response.<br /> // set to "json" in that case. <br /> responsetype: false,<br /> // location of the server-side script that fixes safari <br /> // hanging problem returning "connection: close" header<br /> closeconnection: '',<br /> // class applied to button when mouse is hovered<br /> hoverclass: 'hover', <br /> // when user selects a file, useful with autosubmit disabled <br /> onchange: function(file, extension){}, <br /> // callback to fire before file is uploaded<br /> // you can return false to cancel upload<br /> onsubmit: function(file, extension){},<br /> // fired when file upload is completed<br /> // warning! do not use "false" string as a response!<br /> oncomplete: function(file, response) {}<br /> }; <p> // merge the users options with our defaults<br /> for (var i in options) {<br /> this._settings[i] = options[i];<br /> }<br /> <br /> this._createinput();<br /> this._rerouteclicks();<br /> }<br /> <br /> // assigning methods to our class<br /> ajaxupload.prototype = {<br /> setdata : function(data){<br /> this._settings.data = data;<br /> },<br /> disable : function(){<br /> this._disabled = true;<br /> },<br /> enable : function(){<br /> this._disabled = false;<br /> },<br /> // removes instance<br /> destroy : function(){<br /> if(this._input){<br /> if(this._input.parentnode){<br /> this._input.parentnode.removechild(this._input);<br /> }<br /> this._input = null;<br /> }<br /> }, <br /> /**<br /> * creates invisible file input above the button <br /> */<br /> _createinput : function(){<br /> var self = this;<br /> var input = d.createelement("input");<br /> input.setattribute('type', 'file');<br /> input.setattribute('name', this._settings.name);<br /> var styles = {<br /> 'position' : 'absolute'<br /> ,'margin': '-5px 0 0 -175px'<br /> ,'padding': 0<br /> ,'width': '220px'<br /> ,'height': '30px'<br /> ,'fontsize': '14px' <br /> ,'opacity': 0<br /> ,'cursor': 'pointer'<br /> ,'display' : 'none'<br /> ,'zindex' : 2147483583 //max zindex supported by opera 9.0-9.2x <br /> // strange, i expected 2147483647<br /> // doesn't work in ie :(<br /> //,'direction' : 'ltr' <br /> };<br /> for (var i in styles){<br /> input.style[i] = styles[i];<br /> }<br /> <br /> // make sure that element opacity exists<br /> // (ie uses filter instead)<br /> if ( ! (input.style.opacity === "0")){<br /> input.style.filter = "alpha(opacity=0)";<br /> }<br /> <br /> this._parentdialog.appendchild(input); <p> addevent(input, 'change', function(){<br /> // get filename from input<br /> var file = filefrompath(this.value); <br /> if(self._settings.onchange.call(self, file, getext(file)) == false ){<br /> return; <br /> } <br /> // submit form when value is changed<br /> if (self._settings.autosubmit){<br /> self.submit(); <br /> } <br /> });<br /> <br /> // fixing problem with safari<br /> // the problem is that if you leave input before the file select dialog opens<br /> // it does not upload the file.<br /> // as dialog opens slowly (it is a sheet dialog which takes some time to open)<br /> // there is some time while you can leave the button.<br /> // so we should not change display to none immediately<br /> addevent(input, 'click', function(){<br /> self.justclicked = true;<br /> settimeout(function(){<br /> // we will wait 3 seconds for dialog to open<br /> self.justclicked = false;<br /> }, 2500); <br /> }); <br /> <br /> this._input = input;<br /> },<br /> _rerouteclicks : function (){<br /> var self = this;<br /> <br /> // ie displays 'access denied' error when using this method<br /> // other browsers just ignore click()<br /> // addevent(this._button, 'click', function(e){<br /> // self._input.click();<br /> // });<br /> <br /> var box, dialogoffset = {top:0, left:0}, over = false;<br /> <br /> addevent(self._button, 'mouseo教程ver', function(e){<br /> if (!self._input || over) return;<br /> <br /> over = true;<br /> box = getbox(self._button);<br /> <br /> if (self._parentdialog != d.body){<br /> dialogoffset = getoffset(self._parentdialog);<br /> } <br /> });<br /> <br /> <br /> // we can't use mouseout on the button,<br /> // because invisible input is over it<br /> addevent(document, 'mousemove', function(e){<br /> var input = self._input; <br /> if (!input || !over) return;<br /> <br /> if (self._disabled){<br /> removeclass(self._button, self._settings.hoverclass);<br /> input.style.display = 'none';<br /> return;<br /> } <br /> <br /> var c = getmousecoords(e); <p> if ((c.x >= box.left) && (c.x <= box.right) && <br /> (c.y >= box.top) && (c.y <= box.bottom)){<br /> <br /> input.style.top = c.y - dialogoffset.top + 'px';<br /> input.style.left = c.x - dialogoffset.left + 'px';<br /> input.style.display = 'block';<br /> addclass(self._button, self._settings.hoverclass);<br /> <br /> } else { <br /> // mouse left the button<br /> over = false;<br /> <br /> var check = setinterval(function(){<br /> // if input was just clicked do not hide it<br /> // to prevent safari bug<br /> <br /> if (self.justclicked){<br /> return;<br /> }<br /> <br /> if ( !over ){<br /> input.style.display = 'none'; <br /> } <br /> <br /> clearinterval(check);<br /> <br /> }, 25);<br /> <p> removeclass(self._button, self._settings.hoverclass);<br /> } <br /> }); <br /> <br /> },<br /> /**<br /> * creates iframe with unique name<br /> */<br /> _createiframe : function(){<br /> // unique name<br /> // we cannot use gettime, because it sometimes return<br /> // same value in safari :(<br /> var id = getuid();<br /> <br /> // remove ie6 "this page contains both secure and nonsecure items" prompt <br /> // http://tinyurl.com/77w9wh<br /> var iframe = toelement('<iframe src="网页特效:false;" name="' + id + '" />');<br /> iframe.id = id;<br /> iframe.style.display = 'none';<br /> d.body.appendchild(iframe); <br /> return iframe; <br /> },<br /> /**<br /> * upload file without refreshing the page<br /> */<br /> submit : function(){<br /> var self = this, settings = this._settings; <br /> <br /> if (this._input.value === ''){<br /> // there is no file<br /> return;<br /> }<br /> <br /> // get filename from input<br /> var file = filefrompath(this._input.value); <p> // execute user event<br /> if (! (settings.onsubmit.call(this, file, getext(file)) == false)) {<br /> // create new iframe for this submission<br /> var iframe = this._createiframe();<br /> <br /> // do not submit if user function returns false <br /> var form = this._createform(iframe);<br /> form.appendchild(this._input); <p> // a pretty little hack to make uploads not hang in safari. just call this<br /> // immediately before the upload is submitted. this does an ajax call to<br /> // the server, which returns an empty document with the "connection: close"<br /> // header, telling safari to close the active connection.<br /> // http://blog.airbladesoftware.com/2007/8/17/note-to-self-prevent-uploads-hanging-in-safari<br /> if (settings.closeconnection && /applewebkit|msie/.test(navigator.useragent)){<br /> var xhr = getxhr();<br /> // open synhronous connection<br /> xhr.open('get', settings.closeconnection, false);<br /> xhr.send('');<br /> }<br /> <br /> form.submit();<br /> <br /> d.body.removechild(form); <br /> form = null;<br /> this._input = null;<br /> <br /> // create new input<br /> this._createinput();<br /> <br /> var todeleteflag = false;<br /> <br /> addevent(iframe, 'load', function(e){<br /> <br /> if (// for safari<br /> iframe.src == "javascript:'%3chtml%3e%3c/html%3e';" ||<br /> // for ff, ie<br /> iframe.src == "javascript:'<html>';"){ <br /> <br /> // first time around, do not delete.<br /> if( todeleteflag ){<br /> // fix busy state in ff3<br /> settimeout( function() {<br /> d.body.removechild(iframe);<br /> }, 0);<br /> }<br /> return;<br /> } <br /> <br /> var doc = iframe.contentdocument ? iframe.contentdocument : frames[iframe.id].document; <p> // fixing opera 9.26<br /> if (doc.readystate && doc.readystate != 'complete'){<br /> // opera fires load event multiple times<br /> // even when the dom is not ready yet<br /> // this fix should not affect other browsers<br /> return;<br /> }<br /> <br /> // fixing opera 9.64<br /> if (doc.body && doc.body.innerhtml == "false"){<br /> // in opera 9.64 event was fired second time<br /> // when body.innerhtml changed from false <br /> // to server response approx. after 1 sec<br /> return; <br /> }<br /> <br /> var response;<br /> <br /> if (doc.xmldocument){<br /> // response is a xml document ie property<br /> response = doc.xmldocument;<br /> } else if (doc.body){<br /> // response is html document or plain text<br /> response = doc.body.innerhtml;<br /> if (settings.responsetype && settings.responsetype.tolowercase() == 'json'){<br /> // if the document was sent as 'application/javascript' or<br /> // 'text/javascript', then the browser wraps教程 the text in a <pre class="brush:php;toolbar:false"><br /> // tag and performs html encoding on the contents. in this case,<br /> // we need to pull the original text content from the text node's<br /> // nodevalue property to retrieve the unmangled content.<br /> // note that ie6 only understands text/html<br /> if (doc.body.firstchild && doc.body.firstchild.nodename.touppercase() == 'pre'){<br /> response = doc.body.firstchild.firstchild.nodevalue;<br /> }<br /> if (response) {<br /> response = window["eval"]("(" + response + ")");<br /> } else {<br /> response = {};<br /> }<br /> }<br /> } else {<br /> // response is a xml document<br /> var response = doc;<br /> }<br /> <br /> settings.oncomplete.call(self, file, response);<br /> <br /> // reload blank page, so that reloading main page<br /> // does not re-submit the post. also, remember to<br /> // delete the frame<br /> todeleteflag = true;<br /> <br /> // fix ie mixed content issue<br /> iframe.src = "javascript:'<html>';"; <br /> });<br /> <br /> } else {<br /> // clear input to allow user to select same file<br /> // doesn't work in ie6<br /> // this._input.value = '';<br /> d.body.removechild(this._input); <br /> this._input = null;<br /> <br /> // create new input<br /> this._createinput(); <br /> }<br /> }, <br /> /**<br /> * creates form, that will be submitted to iframe<br /> */<br /> _createform : function(iframe){<br /> var settings = this._settings;<br /> <br /> // method, enctype must be specified here<br /> // because changing this attr on the fly is not allowed in ie 6/7 <br /> var form = toelement('<form method="post" enctype="multipart/form-data">');<br /> form.style.display = 'none';<br /> form.action = settings.action;<br /> form.target = iframe.name;<br /> d.body.appendchild(form);<br /> <br /> // create hidden input element for each data key<br /> for (var prop in settings.data){<br /> var el = d.createelement("input");<br /> el.type = 'hidden';<br /> el.name = prop;<br /> el.value = settings.data[prop];<br /> form.appendchild(el);<br /> } <br /> return form;<br /> } <br /> };<br /> })();<br /> </script>