1 /**

     2  * Ajax upload

     3  * Project page - http://valums.com/ajax-upload/

     4  * Copyright (c) 2008-2009 Andris Valums, http://valums.com

     5  * Licensed under the MIT license (http://valums.com/mit-license/)

     6  * Version 3.6 (03.10.2009)

     7  **/

     8 (function(){

     9 var d = document, w = window;

    10 function get(element){

    11 if (typeof element == "string")

    12 element = d.getElementById(element);

    13 return element;

    14 }

    15 function addEvent(el, type, fn){

    16 if (w.addEventListener){

    17 el.addEventListener(type, fn, false);

    18 } else if (w.attachEvent){

    19 var f = function(){

    20 fn.call(el, w.event);

    21 };	el.attachEvent('on' + type, f)

    22 }

    23 }

    24 var toElement = function(){

    25 var div = d.createElement('div');

    26 return function(html){

    27 div.innerHTML = html;

    28 var el = div.childNodes[0];

    29 div.removeChild(el);

    30 return el;

    31 }

    32 }();

    33 function hasClass(ele,cls){

    34 return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));

    35 }

    36 function addClass(ele,cls) {

    37 if (!hasClass(ele,cls)) ele.className += " "+cls;

    38 }

    39 function removeClass(ele,cls) {

    40 var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');

    41 ele.className=ele.className.replace(reg,' ');

    42 }

    43 if (document.documentElement["getBoundingClientRect"]){

    44 var getOffset = function(el){

    45 var box = el.getBoundingClientRect(),

    46 doc = el.ownerDocument,

    47 body = doc.body,

    48 docElem = doc.documentElement,

    49 clientTop = docElem.clientTop || body.clientTop || 0,

    50 clientLeft = docElem.clientLeft || body.clientLeft || 0,

    51 zoom = 1;

    52 if (body.getBoundingClientRect) {

    53 var bound = body.getBoundingClientRect();

    54 zoom = (bound.right - bound.left)/body.clientWidth;

    55 }

    56 if (zoom > 1){

    57 clientTop = 0;

    58 clientLeft = 0;

    59 }

    60 var top = box.top/zoom + (window.pageYOffset || docElem && docElem.scrollTop/zoom || body.scrollTop/zoom) - clientTop,

    61 left = box.left/zoom + (window.pageXOffset|| docElem && docElem.scrollLeft/zoom || body.scrollLeft/zoom) - clientLeft;

    62 return {

    63 top: top,

    64 left: left

    65 };

    66 }

    67 } else {

    68 var getOffset = function(el){

    69 if (w.jQuery){

    70 return jQuery(el).offset();

    71 }	var top = 0, left = 0;

    72 do {

    73 top += el.offsetTop || 0;

    74 left += el.offsetLeft || 0;

    75 }

    76 while (el = el.offsetParent);

    77 return {

    78 left: left,

    79 top: top

    80 };

    81 }

    82 }

    83 function getBox(el){

    84 var left, right, top, bottom;	var offset = getOffset(el);

    85 left = offset.left;

    86 top = offset.top;

    87 right = left + el.offsetWidth;

    88 bottom = top + el.offsetHeight;	return {

    89 left: left,

    90 right: right,

    91 top: top,

    92 bottom: bottom

    93 };

    94 }

    95 function getMouseCoords(e){	if (!e.pageX && e.clientX){

    96 var zoom = 1;	var body = document.body;

    97 if (body.getBoundingClientRect) {

    98 var bound = body.getBoundingClientRect();

    99 zoom = (bound.right - bound.left)/body.clientWidth;

   100 }

   101 return {

   102 x: e.clientX / zoom + d.body.scrollLeft + d.documentElement.scrollLeft,

   103 y: e.clientY / zoom + d.body.scrollTop + d.documentElement.scrollTop

   104 };

   105 }

   106 return {

   107 x: e.pageX,

   108 y: e.pageY

   109 };	}

   110 var getUID = function(){

   111 var id = 0;

   112 return function(){

   113 return 'ValumsAjaxUpload' + id++;

   114 }

   115 }();

   116 function fileFromPath(file){

   117 return file.replace(/.*(\/|\\)/, "");	}

   118 function getExt(file){

   119 return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';

   120 }	var getXhr = function(){

   121 var xhr;

   122 return function(){

   123 if (xhr) return xhr;

   124 if (typeof XMLHttpRequest !== 'undefined') {

   125 xhr = new XMLHttpRequest();

   126 } else {

   127 var v = [

   128 "Microsoft.XmlHttp",

   129 "MSXML2.XmlHttp.5.0",

   130 "MSXML2.XmlHttp.4.0",

   131 "MSXML2.XmlHttp.3.0",

   132 "MSXML2.XmlHttp.2.0"	];

   133 for (var i=0; i < v.length; i++){

   134 try {

   135 xhr = new ActiveXObject(v[i]);

   136 break;

   137 } catch (e){}

   138 }

   139 }	return xhr;

   140 }

   141 }();

   142 Ajax_upload = AjaxUpload = function(button, options){

   143 if (button.jquery){

   144 button = button[0];

   145 } else if (typeof button == "string" && /^#.*/.test(button)){	button = button.slice(1);	}

   146 button = get(button);	this._input = null;

   147 this._button = button;

   148 this._disabled = false;

   149 this._submitting = false;

   150 this._justClicked = false;

   151 this._parentDialog = d.body;

   152 if (window.jQuery && jQuery.ui && jQuery.ui.dialog){

   153 var parentDialog = jQuery(this._button).parents('.ui-dialog');

   154 if (parentDialog.length){

   155 this._parentDialog = parentDialog[0];

   156 }

   157 }	this._settings = {

   158 action: 'upload.php',	name: 'userfile',

   159 data: {},

   160 autoSubmit: true,

   161 responseType: false,

   162 closeConnection: '',

   163 hoverClass: 'hover',	onChange: function(file, extension){},	onSubmit: function(file, extension){},

   164 onComplete: function(file, response) {}

   165 };

   166 for (var i in options) {

   167 this._settings[i] = options[i];

   168 }

   169 this._createInput();

   170 this._rerouteClicks();

   171 }

   172 AjaxUpload.prototype = {

   173 setData : function(data){

   174 this._settings.data = data;

   175 },

   176 disable : function(){

   177 this._disabled = true;

   178 },

   179 enable : function(){

   180 this._disabled = false;

   181 },

   182 destroy : function(){

   183 if(this._input){

   184 if(this._input.parentNode){

   185 this._input.parentNode.removeChild(this._input);

   186 }

   187 this._input = null;

   188 }

   189 },	_createInput : function(){

   190 var self = this;

   191 var input = d.createElement("input");

   192 input.setAttribute('type', 'file');

   193 input.setAttribute('name', this._settings.name);

   194 var styles = {

   195 'position' : 'absolute'

   196 ,'margin': '-5px 0 0 -175px'

   197 ,'padding': 0

   198 ,'width': '220px'

   199 ,'height': '30px'

   200 ,'fontSize': '14px'	,'opacity': 0

   201 ,'cursor': 'pointer'

   202 ,'display' : 'none'

   203 ,'zIndex' :  2147483583

   204 };

   205 for (var i in styles){

   206 input.style[i] = styles[i];

   207 }

   208 if ( ! (input.style.opacity === "0")){

   209 input.style.filter = "alpha(opacity=0)";

   210 }

   211 this._parentDialog.appendChild(input);

   212 addEvent(input, 'change', function(){

   213 var file = fileFromPath(this.value);	if(self._settings.onChange.call(self, file, getExt(file)) == false ){

   214 return;	}	if (self._settings.autoSubmit){

   215 self.submit();	}	});

   216 addEvent(input, 'click', function(){

   217 self.justClicked = true;

   218 setTimeout(function(){

   219 self.justClicked = false;

   220 }, 2500);	});	this._input = input;

   221 },

   222 _rerouteClicks : function (){

   223 var self = this;

   224 var box, dialogOffset = {top:0, left:0}, over = false;

   225 addEvent(self._button, 'mouseover', function(e){

   226 if (!self._input || over) return;

   227 over = true;

   228 box = getBox(self._button);

   229 if (self._parentDialog != d.body){

   230 dialogOffset = getOffset(self._parentDialog);

   231 }	});

   232 addEvent(document, 'mousemove', function(e){

   233 var input = self._input;	if (!input || !over) return;

   234 if (self._disabled){

   235 removeClass(self._button, self._settings.hoverClass);

   236 input.style.display = 'none';

   237 return;

   238 }	var c = getMouseCoords(e);

   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 {	over = false;

   246 var check = setInterval(function(){

   247 if (self.justClicked){

   248 return;

   249 }

   250 if ( !over ){

   251 input.style.display = 'none';	}	clearInterval(check);

   252 }, 25);

   253 removeClass(self._button, self._settings.hoverClass);

   254 }	});	},

   255 _createIframe : function(){

   256 var id = getUID();

   257 var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');

   258 iframe.id = id;

   259 iframe.style.display = 'none';

   260 d.body.appendChild(iframe);	return iframe;	},

   261 submit : function(){

   262 var self = this, settings = this._settings;	if (this._input.value === ''){

   263 return;

   264 }

   265 var file = fileFromPath(this._input.value);	if (! (settings.onSubmit.call(this, file, getExt(file)) == false)) {

   266 var iframe = this._createIframe();

   267 var form = this._createForm(iframe);

   268 form.appendChild(this._input);

   269 if (settings.closeConnection && /AppleWebKit|MSIE/.test(navigator.userAgent)){

   270 var xhr = getXhr();

   271 xhr.open('GET', settings.closeConnection, false);

   272 xhr.send('');

   273 }

   274 form.submit();

   275 d.body.removeChild(form);	form = null;

   276 this._input = null;

   277 this._createInput();

   278 var toDeleteFlag = false;

   279 addEvent(iframe, 'load', function(e){

   280 if (// For Safari

   281 iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" ||

   282 iframe.src == "javascript:'<html></html>';"){	if( toDeleteFlag ){

   283 setTimeout( function() {

   284 d.body.removeChild(iframe);

   285 }, 0);

   286 }

   287 return;

   288 }	var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document;

   289 if (doc.readyState && doc.readyState != 'complete'){

   290 return;

   291 }

   292 if (doc.body && doc.body.innerHTML == "false"){

   293 return;	}

   294 var response;

   295 if (doc.XMLDocument){

   296 response = doc.XMLDocument;

   297 } else if (doc.body){

   298 response = doc.body.innerHTML;

   299 if (settings.responseType && settings.responseType.toLowerCase() == 'json'){

   300 if (doc.body.firstChild && doc.body.firstChild.nodeName.toUpperCase() == 'PRE'){

   301 response = doc.body.firstChild.firstChild.nodeValue;

   302 }

   303 if (response) {

   304 response = window["eval"]("(" + response + ")");

   305 } else {

   306 response = {};

   307 }

   308 }

   309 } else {

   310 var response = doc;

   311 }

   312 settings.onComplete.call(self, file, response);

   313 toDeleteFlag = true;

   314 iframe.src = "javascript:'<html></html>';";	});

   315 } else {

   316 d.body.removeChild(this._input);	this._input = null;

   317 this._createInput();	}

   318 },	_createForm : function(iframe){

   319 var settings = this._settings;

   320 var form = toElement('<form method="post" enctype="multipart/form-data"></form>');

   321 form.style.display = 'none';

   322 form.action = settings.action;

   323 form.target = iframe.name;

   324 d.body.appendChild(form);

   325 for (var prop in settings.data){

   326 var el = d.createElement("input");

   327 el.type = 'hidden';

   328 el.name = prop;

   329 el.value = settings.data[prop];

   330 form.appendChild(el);

   331 }	return form;

   332 }	};

   333 })(jQuery);