AjaxUpLoad.js实现文件上传


Posted in Javascript onMarch 05, 2018

AjaxUpload.js文件的代码,供大家参考,具体内容如下

/** 
 * AJAX Upload ( http://valums.com/ajax-upload/ ) 
 * Copyright (c) Andris Valums 
 * Licensed under the MIT license ( http://valums.com/mit-license/ ) 
 * Thanks to Gary Haran, David Mark, Corey Burns and others for contributions 
 */ 
(function () { 
 /* global window */ 
 /* jslint browser: true, devel: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true */ 
 
 /** 
 * Wrapper for FireBug's console.log 
 */ 
 
 function log() { 
 if (typeof(console) != 'undefined' && typeof(console.log) == 'function') { 
  Array.prototype.unshift.call(arguments, '[Ajax Upload]'); 
  console.log(Array.prototype.join.call(arguments, ' ')); 
 } 
 } 
 
 /** 
 * Attaches event to a dom element. 
 * @param {Element} el 
 * @param type event name 
 * @param fn callback This refers to the passed element 
 */ 
 
 function addEvent(el, type, fn) { 
 if (el.addEventListener) { 
  el.addEventListener(type, fn, false); 
 } else if (el.attachEvent) { 
  el.attachEvent('on' + type, function () { 
  fn.call(el); 
  }); 
 } else { 
  throw new Error('not supported or DOM not loaded'); 
 } 
 } 
 
 /** 
 * Attaches resize event to a window, limiting 
 * number of event fired. Fires only when encounteres 
 * delay of 100 after series of events. 
 * 
 * Some browsers fire event multiple times when resizing 
 * http://www.quirksmode.org/dom/events/resize.html 
 * 
 * @param fn callback This refers to the passed element 
 */ 
 
 function addResizeEvent(fn) { 
 var timeout; 
 
 addEvent(window, 'resize', function () { 
  if (timeout) { 
  clearTimeout(timeout); 
  } 
  timeout = setTimeout(fn, 100); 
 }); 
 } 
 
 // Needs more testing, will be rewriten for next version  
 // 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(); 
  var doc = el.ownerDocument; 
  var body = doc.body; 
  var docElem = doc.documentElement; // for ie 
  var clientTop = docElem.clientTop || body.clientTop || 0; 
  var 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. 
  var 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) { 
  var top = 0, 
  left = 0; 
  do { 
  top += el.offsetTop || 0; 
  left += el.offsetLeft || 0; 
  el = el.offsetParent; 
  } while (el); 
 
  return { 
  left: left, 
  top: top 
  }; 
 }; 
 } 
 
 /** 
 * Returns left, top, right and bottom properties describing the border-box, 
 * in pixels, with the top-left relative to the body 
 * @param {Element} el 
 * @return {Object} Contains left, top, right,bottom 
 */ 
 
 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 
 }; 
 } 
 
 /** 
 * Helper that takes object literal 
 * and add all properties to element.style 
 * @param {Element} el 
 * @param {Object} styles 
 */ 
 
 function addStyles(el, styles) { 
 for (var name in styles) { 
  if (styles.hasOwnProperty(name)) { 
  el.style[name] = styles[name]; 
  } 
 } 
 } 
 
 /** 
 * Function places an absolutely positioned 
 * element on top of the specified element 
 * copying position and dimentions. 
 * @param {Element} from 
 * @param {Element} to 
 */ 
 
 function copyLayout(from, to) { 
 var box = getBox(from); 
 
 addStyles(to, { 
  position: 'absolute', 
  left: box.left + 'px', 
  top: box.top + 'px', 
  width: from.offsetWidth + 'px', 
  height: from.offsetHeight + 'px' 
 }); 
 } 
 
 /** 
 * Creates and returns element from html chunk 
 * Uses innerHTML to create an element 
 */ 
 var toElement = (function () { 
 var div = document.createElement('div'); 
 return function (html) { 
  div.innerHTML = html; 
  var el = div.firstChild; 
  return div.removeChild(el); 
 }; 
 })(); 
 
 /** 
 * Function generates unique id 
 * @return unique id 
 */ 
 var getUID = (function () { 
 var id = 0; 
 return function () { 
  return 'ValumsAjaxUpload' + id++; 
 }; 
 })(); 
 
 /** 
 * Get file name from path 
 * @param {String} file path to file 
 * @return filename 
 */ 
 
 function fileFromPath(file) { 
 return file.replace(/.*(\/|\\)/, ""); 
 } 
 
 /** 
 * Get file extension lowercase 
 * @param {String} file name 
 * @return file extenstion 
 */ 
 
 function getExt(file) { 
 return (-1 !== file.indexOf('.')) ? file.replace(/.*[.]/, '') : ''; 
 } 
 
 function hasClass(el, name) { 
 var re = new RegExp('\\b' + name + '\\b'); 
 return re.test(el.className); 
 } 
 
 function addClass(el, name) { 
 if (!hasClass(el, name)) { 
  el.className += ' ' + name; 
 } 
 } 
 
 function removeClass(el, name) { 
 var re = new RegExp('\\b' + name + '\\b'); 
 el.className = el.className.replace(re, ''); 
 } 
 
 function removeNode(el) { 
 el.parentNode.removeChild(el); 
 } 
 
 /** 
 * Easy styling and uploading 
 * @constructor 
 * @param button An element you want convert to 
 * upload button. Tested dimentions up to 500x500px 
 * @param {Object} options See defaults below. 
 */ 
 window.AjaxUpload = function (button, options) { 
 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, 
  // Class applied to button when mouse is hovered 
  hoverClass: 'hover', 
  // Class applied to button when AU is disabled 
  disabledClass: 'disabled', 
  // When user selects a file, useful with autoSubmit disabled 
  // You can return false to cancel upload  
  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) { 
  if (options.hasOwnProperty(i)) { 
  this._settings[i] = options[i]; 
  } 
 } 
 
 // button isn't necessary a dom element 
 if (button.jquery) { 
  // jQuery object was passed 
  button = button[0]; 
 } else if (typeof button == "string") { 
  if (/^#.*/.test(button)) { 
  // If jQuery user passes #elementId don't break it   
  button = button.slice(1); 
  } 
 
  button = document.getElementById(button); 
 } 
 
 if (!button || button.nodeType !== 1) { 
  throw new Error("Please make sure that you're passing a valid element"); 
 } 
 
 if (button.nodeName.toUpperCase() == 'A') { 
  // disable link    
  addEvent(button, 'click', function (e) { 
  if (e && e.preventDefault) { 
   e.preventDefault(); 
  } else if (window.event) { 
   window.event.returnValue = false; 
  } 
  }); 
 } 
 
 // DOM element 
 this._button = button; 
 // DOM element   
 this._input = null; 
 // If disabled clicking on button won't do anything 
 this._disabled = false; 
 
 // if the button was disabled before refresh if will remain 
 // disabled in FireFox, let's fix it 
 this.enable(); 
 
 this._rerouteClicks(); 
 }; 
 
 // assigning methods to our class 
 AjaxUpload.prototype = { 
 setData: function (data) { 
  this._settings.data = data; 
 }, 
 disable: function () { 
  addClass(this._button, this._settings.disabledClass); 
  this._disabled = true; 
 
  var nodeName = this._button.nodeName.toUpperCase(); 
  if (nodeName == 'INPUT' || nodeName == 'BUTTON') { 
  this._button.setAttribute('disabled', 'disabled'); 
  } 
 
  // hide input 
  if (this._input) { 
  // We use visibility instead of display to fix problem with Safari 4 
  // The problem is that the value of input doesn't change if it 
  // has display none when user selects a file  
  this._input.parentNode.style.visibility = 'hidden'; 
  } 
 }, 
 enable: function () { 
  removeClass(this._button, this._settings.disabledClass); 
  this._button.removeAttribute('disabled'); 
  this._disabled = false; 
 
 }, 
 /** 
  * Creates invisible file input 
  * that will hover above the button 
  * <div><input type='file' /></div> 
  */ 
 _createInput: function () { 
  var self = this; 
 
  var input = document.createElement("input"); 
  input.setAttribute('type', 'file'); 
  input.setAttribute('name', this._settings.name); 
 
  addStyles(input, { 
  'position': 'absolute', 
  // in Opera only 'browse' button 
  // is clickable and it is located at 
  // the right side of the input 
  'right': 0, 
  'margin': 0, 
  'padding': 0, 
  'fontSize': '480px', 
  'cursor': 'pointer' 
  }); 
 
  var div = document.createElement("div"); 
  addStyles(div, { 
  'display': 'block', 
  'position': 'absolute', 
  'overflow': 'hidden', 
  'margin': 0, 
  'padding': 0, 
  'opacity': 0, 
  // Make sure browse button is in the right side 
  // in Internet Explorer 
  'direction': 'ltr', 
  //Max zIndex supported by Opera 9.0-9.2 
  'zIndex': 2147483583 
  }); 
 
  // Make sure that element opacity exists. 
  // Otherwise use IE filter  
  if (div.style.opacity !== "0") { 
  if (typeof(div.filters) == 'undefined') { 
   throw new Error('Opacity not supported by the browser'); 
  } 
  div.style.filter = "alpha(opacity=0)"; 
  } 
 
  addEvent(input, 'change', function () { 
 
  if (!input || input.value === '') { 
   return; 
  } 
 
  // Get filename from input, required   
  // as some browsers have path instead of it  
  var file = fileFromPath(input.value); 
 
  if (false === self._settings.onChange.call(self, file, getExt(file))) { 
   self._clearInput(); 
   return; 
  } 
 
  // Submit form when value is changed 
  if (self._settings.autoSubmit) { 
   self.submit(); 
  } 
  }); 
 
  addEvent(input, 'mouseover', function () { 
  addClass(self._button, self._settings.hoverClass); 
  }); 
 
  addEvent(input, 'mouseout', function () { 
  removeClass(self._button, self._settings.hoverClass); 
 
  // We use visibility instead of display to fix problem with Safari 4 
  // The problem is that the value of input doesn't change if it 
  // has display none when user selects a file  
  input.parentNode.style.visibility = 'hidden'; 
 
  }); 
 
  div.appendChild(input); 
  document.body.appendChild(div); 
 
  this._input = input; 
 }, 
 _clearInput: function () { 
  if (!this._input) { 
  return; 
  } 
 
  // this._input.value = ''; Doesn't work in IE6     
  removeNode(this._input.parentNode); 
  this._input = null; 
  this._createInput(); 
 
  removeClass(this._button, this._settings.hoverClass); 
 }, 
 /** 
  * Function makes sure that when user clicks upload button, 
  * the this._input is clicked instead 
  */ 
 _rerouteClicks: function () { 
  var self = this; 
 
  // IE will later display 'access denied' error 
  // if you use using self._input.click() 
  // other browsers just ignore click() 
 
  addEvent(self._button, 'mouseover', function () { 
  if (self._disabled) { 
   return; 
  } 
 
  if (!self._input) { 
   self._createInput(); 
  } 
 
  var div = self._input.parentNode; 
  copyLayout(self._button, div); 
  div.style.visibility = 'visible'; 
 
  }); 
 
 
  // commented because we now hide input on mouseleave 
  /** 
  * When the window is resized the elements 
  * can be misaligned if button position depends 
  * on window size 
  */ 
  //addResizeEvent(function(){ 
  // if (self._input){ 
  // copyLayout(self._button, self._input.parentNode); 
  // } 
  //});  
 
 }, 
 /** 
  * Creates iframe with unique name 
  * @return {Element} iframe 
  */ 
 _createIframe: function () { 
  // We can't use getTime, because it sometimes return 
  // same value in safari :( 
  var id = getUID(); 
 
  // We can't use following code as the name attribute 
  // won't be properly registered in IE6, and new window 
  // on form submit will open 
  // var iframe = document.createElement('iframe'); 
  // iframe.setAttribute('name', id);    
 
  var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />'); 
  // src="javascript:false; was added 
  // because it possibly removes ie6 prompt 
  // "This page contains both secure and nonsecure items" 
  // Anyway, it doesn't do any harm.  
  iframe.setAttribute('id', id); 
 
  iframe.style.display = 'none'; 
  document.body.appendChild(iframe); 
 
  return iframe; 
 }, 
 /** 
  * Creates form, that will be submitted to iframe 
  * @param {Element} iframe Where to submit 
  * @return {Element} form 
  */ 
 _createForm: function (iframe) { 
  var settings = this._settings; 
 
  // We can't use the following code in IE6 
  // var form = document.createElement('form'); 
  // form.setAttribute('method', 'post'); 
  // form.setAttribute('enctype', 'multipart/form-data'); 
  // Because in this case file won't be attached to request   
  var form = toElement('<form method="post" enctype="multipart/form-data"></form>'); 
 
  form.setAttribute('action', settings.action); 
  form.setAttribute('target', iframe.name); 
  form.style.display = 'none'; 
  document.body.appendChild(form); 
 
  // Create hidden input element for each data key 
  for (var prop in settings.data) { 
  if (settings.data.hasOwnProperty(prop)) { 
   var el = document.createElement("input"); 
   el.setAttribute('type', 'hidden'); 
   el.setAttribute('name', prop); 
   el.setAttribute('value', settings.data[prop]); 
   form.appendChild(el); 
  } 
  } 
  return form; 
 }, 
 /** 
  * Gets response from iframe and fires onComplete event when ready 
  * @param iframe 
  * @param file Filename to use in onComplete callback 
  */ 
 _getResponse: function (iframe, file) { 
  // getting response 
  var toDeleteFlag = false, 
  self = this, 
  settings = this._settings; 
 
  addEvent(iframe, 'load', function () { 
 
  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. 
   // We reload to blank page, so that reloading main page 
   // does not re-submit the post. 
 
   if (toDeleteFlag) { 
   // Fix busy state in FF3 
   setTimeout(function () { 
    removeNode(iframe); 
   }, 
   0); 
   } 
 
   return; 
  } 
 
  var doc = iframe.contentDocument ? iframe.contentDocument : window.frames[iframe.id].document; 
 
  // fixing Opera 9.26,10.00 
  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 Internet Explorer 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 = eval("(" + response + ")"); 
   } else { 
    response = {}; 
   } 
   } 
  } else { 
   // response is a xml document 
   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>';"; 
  }); 
 }, 
 /** 
  * Upload file contained in this._input 
  */ 
 submit: function () { 
  var self = this, 
  settings = this._settings; 
 
  if (!this._input || this._input.value === '') { 
  return; 
  } 
 
  var file = fileFromPath(this._input.value); 
 
  // user returned false to cancel upload 
  if (false === settings.onSubmit.call(this, file, getExt(file))) { 
  this._clearInput(); 
  return; 
  } 
 
  // sending request 
  var iframe = this._createIframe(); 
  var form = this._createForm(iframe); 
 
  // assuming following structure 
  // div -> input type='file' 
  removeNode(this._input.parentNode); 
  removeClass(self._button, self._settings.hoverClass); 
 
  form.appendChild(this._input); 
 
  form.submit(); 
 
  // request set, clean up   
  removeNode(form); 
  form = null; 
  removeNode(this._input); 
  this._input = null; 
 
  // Get response from iframe and fire onComplete event when ready 
  this._getResponse(iframe, file); 
 
  // get ready for next request  
  this._createInput(); 
 } 
 }; 
})();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
jQuery 表格工具集
Apr 25 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
javascript内置对象arguments详解
Mar 16 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
JsChart组件使用详解
Mar 04 #Javascript
ionic2中使用自动生成器的方法
Mar 04 #Javascript
Vue.directive()的用法和实例详解
Mar 04 #Javascript
Vue.directive 自定义指令的问题小结
Mar 04 #Javascript
JavaScript图片处理与合成总结
Mar 04 #Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 #Javascript
编写React组件项目实践分析
Mar 04 #Javascript
You might like
又一个php 分页类实现代码
2009/12/03 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
php实现删除空目录的方法
2015/03/16 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
javascript 对象的定义方法
2007/01/10 Javascript
求得div 下 img的src地址的js代码
2007/02/28 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
python中的lambda表达式用法详解
2016/06/22 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python实现树形打印目录结构
2018/03/29 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
某公司.Net方向面试题
2014/04/24 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
应届生求职推荐信
2013/10/28 职场文书
护理专业自荐信范文
2014/02/26 职场文书
《散步》教学反思
2014/03/02 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
 Python 中 logging 模块使用详情
2022/03/03 Python