<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<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("input");
el.type = 'hidden';
el.name = prop;
el.value = settings.data[prop];
form.appendchild(el);
}
return form;
}
};
})();
</script>
</head><body>
<p id="errorremind"></p>
<input id="unloadpic" type="button" value="上傳圖片" />
<ol id="uploadedname"></ol><script type="text/javascript" src="../js/ajaxupload.js"></script>
<script type="text/javascript">
window.onload = function(){
var obtn = document.getelementbyid("unloadpic");
var oshow = document.getelementbyid("uploadedname");
var oremind = document.getelementbyid("errorremind");
new ajaxupload(obtn,{
action:"file_upload.php",
name:"upload",
onsubmit:function(file,ext){
if(ext && /^(jpg|jpeg|png|gif)$/.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);
}
});
};
</script>
</body>
</html>
<?php #file_upload.php 2009-11-06
$file_path = '../../../uploads/';
$file_up = $file_path.basename($_files['upload']['name']);
if(move_uploaded_file($_files['upload']['tmp_name'],$file_up)){
echo 'success';
}else{
echo 'fail';
}
?>
