ajax php多文件上传代码
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ajax php多文件上传代码</title>
<script>
(function () {
var d = document,
w = window;
/**
* get element by id
*/
function get(element) {
if (typeof element == "string")
element = d.getelementbyid(element);
return element;
}
/**
* attaches event to a dom 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)
}
}
/**
* creates and returns element from html chunk
*/
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, ' ');
}
// getoffset function copied from jquery lib (http://jquery.com/)
if (document.documentelement["getboundingclientrect"]) {
// get offset using getboundingclientrect
// http://ejohn.org/blog/getboundingclientrect-is-awesome/
var getoffset = function (el) {
var box = el.getboundingclientrect(),
doc = el.ownerdocument,
body = doc.body,
docelem = doc.documentelement,
// for ie
clienttop = docelem.clienttop || body.clienttop || 0,
clientleft = docelem.clientleft || body.clientleft || 0,
// in internet explorer 7 getboundingclientrect property is treated as physical,
// while others are logical. make all logical, like in ie8.
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 {
// get offset adding all offsets
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
};
}
/**
* crossbrowser mouse coordinates
*/
function getmousecoords(e) {
// pagex/y is not supported in ie
// http://www.quirksmode.org/dom/w3c_css教程om.html
if (!e.pagex && e.clientx) {
// in internet explorer 7 some properties (mouse coordinates) are treated as physical,
// while others are logical (offset).
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
};
}
/**
* function generates unique id
*/
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()) : '';
}
/**
* cross-browser way to get xhr object
*/
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 < v.length; 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) {
// jquery object was passed
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;
// variable changes to true if the button was clicked
// 3 seconds ago (requred to fix safari on mac error)
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 = {
// location of the server-side upload script
action : 'upload.php',
// file upload name
name : 'userfile',
// additional data to send
data : {},
// submit file as soon as it's selected
autosubmit : true,
// the type of data that you're expecting back from the server.
// html and xml are detected automatically.
// only useful when you are using json data as a response.
// set to "json" in that case.
responsetype : false,
// location of the server-side script that fixes safari
// hanging problem returning "connection: close" header
closeconnection : '',
// class applied to button when mouse is hovered
hoverclass : 'hover',
// when user selects a file, useful with autosubmit disabled
onchange : function (file, extension) {},
// callback to fire before file is uploaded
// you can return false to cancel upload
onsubmit : function (file, extension) {},
// fired when file upload is completed
// warning! do not use "false" string as a response!
oncomplete : function (file, response) {}
};
// merge the users options with our defaults
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;
},
// removes instance
destroy : function () {
if (this._input) {
if (this._input.parentnode) {
this._input.parentnode.removechild(this._input);
}
this._input = null;
}
},
/**
* creates invisible file input above the button
*/
_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 //max zindex supported by opera 9.0-9.2x
// strange, i expected 2147483647
// doesn't work in ie :(
//,'direction' : 'ltr'
};
for (var i in styles) {
input.style[i] = styles[i];
}
// make sure that element opacity exists
// (ie uses filter instead)
if (!(input.style.opacity === "0")) {
input.style.filter = "alpha(opacity=0)";
}
this._parentdialog.appendchild(input);
addevent(input, 'change', function () {
// get filename from input
var file = filefrompath(this.value);
if (self._settings.onchange.call(self, file, getext(file)) == false) {
return;
}
// submit form when value is changed
if (self._settings.autosubmit) {
self.submit();
}
});
// fixing problem with safari
// the problem is that if you leave input before the file select dialog opens
// it does not upload the file.
// as dialog opens slowly (it is a sheet dialog which takes some time to open)
// there is some time while you can leave the button.
// so we should not change display to none immediately
addevent(input, 'click', function () {
self.justclicked = true;
settimeout(function () {
// we will wait 3 seconds for dialog to open
self.justclicked = false;
}, 2500);
});
this._input = input;
},
_rerouteclicks : function () {
var self = this;
// ie displays 'access denied' error when using this method
// other browsers just ignore click()
// addevent(this._button, 'click', function(e){
// self._input.click();
// });
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);
}
});
// we can't use mouseout on the button,
// because invisible input is over it
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 {
// mouse left the button
over = false;
var check = setinterval(function () {
// if input was just clicked do not hide it
// to prevent safari bug
if (self.justclicked) {
return;
}
if (!over) {
input.style.display = 'none';
}
clearinterval(check);
}, 25);
removeclass(self._button, self._settings.hoverclass);
}
});
},
/**
* creates iframe with unique name
*/
_createiframe : function () {
// unique name
// we cannot use gettime, because it sometimes return
// same value in safari :(
var id = getuid();
// remove ie6 "this page contains both secure and nonsecure items" prompt
// http://tinyurl.com/77w9wh
var iframe = toelement('<iframe src="网页特效:false;" name="' + id + '" />');
iframe.id = id;
iframe.style.display = 'none';
d.body.appendchild(iframe);
return iframe;
},
/**
* upload file without refreshing the page
*/
submit : function () {
var self = this,
settings = this._settings;
if (this._input.value === '') {
// there is no file
return;
}
// get filename from input
var file = filefrompath(this._input.value);
// execute user event
if (!(settings.onsubmit.call(this, file, getext(file)) == false)) {
// create new iframe for this submission
var iframe = this._createiframe();
// do not submit if user function returns false
var form = this._createform(iframe);
form.appendchild(this._input);
// a pretty little hack to make uploads not hang in safari. just call this
// immediately before the upload is submitted. this does an ajax call to
// the server, which returns an empty document with the "connection: close"
// header, telling safari to close the active connection.
// http://blog.airbladesoftware.com/2007/8/17/note-to-self-prevent-uploads-hanging-in-safari
if (settings.closeconnection && /applewebkit|msie/.test(navigator.useragent)) {
var xhr = getxhr();
// open synhronous connection
xhr.open('get', settings.closeconnection, false);
xhr.send('');
}
form.submit();
d.body.removechild(form);
form = null;
this._input = null;
// create new input
this._createinput();
var todeleteflag = false;
addevent(iframe, 'load', function (e) {
if (// for safari
iframe.src == "javascript：'%3chtml%3e%3c/html%3e';" ||
// for ff, ie
iframe.src == "javascript：'<html></html>';") {
// first time around, do not delete.
if (todeleteflag) {
// fix busy state in ff3
settimeout(function () {
d.body.removechild(iframe);
}, 0);
}
return;
}
var doc = iframe.contentdocument ? iframe.contentdocument : frames[iframe.id].document;
// fixing opera 9.26
if (doc.readystate && doc.readystate != 'complete') {
// opera fires load event multiple times
// even when the dom is not ready yet
// this fix should not affect other browsers
return;
}
// fixing opera 9.64
if (doc.body && doc.body.innerhtml == "false") {
// in opera 9.64 event was fired second time
// when body.innerhtml changed from false
// to server response approx. after 1 sec
return;
}
var response;
if (doc.xmldocument) {
// response is a xml document ie property
response = doc.xmldocument;
} else if (doc.body) {
// response is html document or plain text
response = doc.body.innerhtml;
if (settings.responsetype && settings.responsetype.tolowercase() == 'json') {
// if the document was sent as 'application/javascript' or
// 'text/javascript', then the browser wraps教程 the text in a <pre>
// tag and performs html encoding on the contents. in this case,
// we need to pull the original text content from the text node's
// nodevalue property to retrieve the unmangled content.
// note that ie6 only understands text/html
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 {
// response is a xml document
var response = doc;
}
settings.oncomplete.call(self, file, response);
// reload blank page, so that reloading main page
// does not re-submit the post. also, remember to
// delete the frame
todeleteflag = true;
// fix ie mixed content issue
iframe.src = "javascript：'<html></html>';";
});
} else {
// clear input to allow user to select same file
// doesn't work in ie6
// this._input.value = '';
d.body.removechild(this._input);
this._input = null;
// create new input
this._createinput();
}
},
/**
* creates form, that will be submitted to iframe
*/
_createform : function (iframe) {
var settings = this._settings;
// method, enctype must be specified here
// because changing this attr on the fly is not allowed in ie 6/7
var form = toelement('<form method="post" enctype="multipart/form-data"></form>');
form.style.display = 'none';
form.action = settings.action;
form.target = iframe.name;
d.body.appendchild(form);
// create hidden input element for each data key
for (var prop in settings.data) {
var el = d.createelement("教程地址：http://www.phprm.com/scxz/fs5061.html
欢迎转载！但请带上文章地址^^