当前位置:小鱼儿玄机二站 > 操作系统 > jquery插件ajaxupload完成文件上传操作,js达成文件

jquery插件ajaxupload完成文件上传操作,js达成文件

文章作者:操作系统 上传时间:2019-09-03

本文实例陈说了jquery插件ajaxupload完成公文上传操作代码。分享给大家供大家参照他事他说加以考察。具体如下:
运作效果截图如下:

AjaxUpLoad.js的运用完毕无刷新文件上传,如图。

图片 1

图片 2

图1 文件上传前

图1 文件上传前

图片 3

图片 4

图2 文件上传后

图2 文件上传后

现实代码如下:

1、创设页面并编写制定HTML

1、创制页面并编写HTML

上传文书档案: 

上传文书档案: 

<div class="uploadFile"> 
 <input type="text" disabled="disabled" /> 
 <input type="hidden" id="hidFileName" /> 
 <input type="button" id="btnUploadFile" value="上传" /> 
 <input type="button" id="btnDeleteFile" value="删除" /> 
</div> 
<div class="uploadFile"> 
 <input type="text" disabled="disabled" /> 
 <input type="hidden" id="hidFileName" /> 
 <input type="button" id="btnUploadFile" value="上传" /> 
 <input type="button" id="btnDeleteFile" value="删除" /> 
</div> 

上传图片: 

上传图片: 

<div class="uploadImg"> 
 <img id="imgShow" src="/images/nophoto.gif" /> 
 <input type="hidden" id="hidImgName" /> 
 <input type="button" id="btnUploadImg" value="上传" /> 
 <input type="button" id="btnDeleteImg" value="删除" /> 
</div> 
<div class="uploadImg"> 
 <img id="imgShow" src="/images/nophoto.gif" /> 
 <input type="hidden" id="hidImgName" /> 
 <input type="button" id="btnUploadImg" value="上传" /> 
 <input type="button" id="btnDeleteImg" value="删除" /> 
</div> 

2、引用AjaxUpload.js文件

2、引用AjaxUpload.js文件

<script src="/js/common/AjaxUpload.js" type="text/javascript"></script> 
<script src="/js/common/AjaxUpload.js" type="text/javascript"></script> 

3、编写JS脚本

3、编写JS脚本

window.onload = function() { 
 init(); //初始化 
} 

//初始化 
function init() { 
 //初始化文档上传 
 var btnFile = document.getElementById("btnUploadFile"); 
 var doc = document.getElementById("doc"); 
 var hidFileName = document.getElementById("hidFileName"); 
 document.getElementById("btnDeleteFile").onclick = function() { DelFile(doc, hidFileName); }; 
 g_AjxUploadFile(btnFile, doc, hidFileName); 

 //初始化图片上传 
 var btnImg = document.getElementById("btnUploadImg"); 
 var img = document.getElementById("imgShow"); 
 var hidImgName = document.getElementById("hidImgName"); 
 document.getElementById("btnDeleteImg").onclick = function() { DelImg(img, hidImgName); }; 
 g_AjxUploadImg(btnImg, img, hidImgName); 
} 


var g_AjxTempDir = "/file/temp/"; 
//文档上传 
function g_AjxUploadFile(btn, doc, hidPut, action) { 
 var button = btn, interval; 
 new AjaxUpload(button, { 
 action: ((action == null || action == undefined) ? '/Common/UploadHandler.ashx?fileType=file' : action), 
 data: {}, 
 name: 'myfile', 
 onSubmit: function(file, ext) { 
 if (!(ext && /^(rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx|RAR|ZIP|PDF|PDFX|TXT|CSV|XLS|XLSX|DOC|DOCX)$/.test(ext))) { 
 alert("您上传的文档格式不对,请重新选择!"); 
 return false; 
 } 
 }, 
 onComplete: function(file, response) { 
 flagValue = response; 
 if (flagValue == "1") { 
 alert("您上传的文档格式不对,请重新选择!"); 
 } 
 else if (flagValue == "2") { 
 alert("您上传的文档大于2M,请重新选择!"); 
 } 
 else if (flagValue == "3") { 
 alert("文档上传失败!"); 
 } 
 else { 
 hidPut.value = response; 
 doc.innerHTML="<a href='" + g_AjxTempDir + response + "' target='_blank'>" + response + "</a>"; 
 } 
 } 
 }); 
} 
//图片上传 
function g_AjxUploadImg(btn, img, hidPut) { 
 var button = btn, interval; 
 new AjaxUpload(button, { 
 action: '/Common/UploadHandler.ashx?fileType=img', 
 data: {}, 
 name: 'myfile', 
 onSubmit: function(file, ext) { 
 if (!(ext && /^(jpg|JPG|png|PNG|gif|GIF)$/.test(ext))) { 
 alert("您上传的图片格式不对,请重新选择!"); 
 return false; 
 } 
 }, 
 onComplete: function(file, response) { 
 flagValue = response; 
 if (flagValue == "1") { 
 alert("您上传的图片格式不对,请重新选择!"); 
 } 
 else if (flagValue == "2") { 
 alert("您上传的图片大于200K,请重新选择!"); 
 } 
 else if (flagValue == "3") { 
 alert("图片上传失败!"); 
 } 
 else { 
 hidPut.value = response; 
 img.src = g_AjxTempDir + response; 
 } 
 } 
 }); 
} 

//删除文档 
function DelFile(doc, hidPut) { 
 hidPut.value = ""; 
 doc.innerHTML = "<input type="text" disabled="disabled" />"; 
} 

//删除图片 
function DelImg(img, hidPut) { 
 hidPut.value = ""; 
 img.src = "/images/nophoto.gif"; 
} 
window.onload = function() { 
 init(); //初始化 
} 

//初始化 
function init() { 
 //初始化文档上传 
 var btnFile = document.getElementById("btnUploadFile"); 
 var doc = document.getElementById("doc"); 
 var hidFileName = document.getElementById("hidFileName"); 
 document.getElementById("btnDeleteFile").onclick = function() { DelFile(doc, hidFileName); }; 
 g_AjxUploadFile(btnFile, doc, hidFileName); 

 //初始化图片上传 
 var btnImg = document.getElementById("btnUploadImg"); 
 var img = document.getElementById("imgShow"); 
 var hidImgName = document.getElementById("hidImgName"); 
 document.getElementById("btnDeleteImg").onclick = function() { DelImg(img, hidImgName); }; 
 g_AjxUploadImg(btnImg, img, hidImgName); 
} 


var g_AjxTempDir = "/file/temp/"; 
//文档上传 
function g_AjxUploadFile(btn, doc, hidPut, action) { 
 var button = btn, interval; 
 new AjaxUpload(button, { 
 action: ((action == null || action == undefined) ? '/Common/UploadHandler.ashx?fileType=file' : action), 
  data: {}, 
  name: 'myfile', 
  onSubmit: function(file, ext) { 
   if (!(ext && /^(rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx|RAR|ZIP|PDF|PDFX|TXT|CSV|XLS|XLSX|DOC|DOCX)$/.test(ext))) { 
    alert("您上传的文档格式不对,请重新选择!"); 
    return false; 
   } 
  }, 
  onComplete: function(file, response) { 
   flagValue = response; 
   if (flagValue == "1") { 
    alert("您上传的文档格式不对,请重新选择!"); 
   } 
   else if (flagValue == "2") { 
    alert("您上传的文档大于2M,请重新选择!"); 
   } 
   else if (flagValue == "3") { 
    alert("文档上传失败!"); 
   } 
   else { 
    hidPut.value = response; 
    doc.innerHTML="<a href='" + g_AjxTempDir + response + "' target='_blank'>" + response + "</a>"; 
   } 
  } 
 }); 
} 
//图片上传 
function g_AjxUploadImg(btn, img, hidPut) { 
 var button = btn, interval; 
 new AjaxUpload(button, { 
  action: '/Common/UploadHandler.ashx?fileType=img', 
  data: {}, 
  name: 'myfile', 
  onSubmit: function(file, ext) { 
   if (!(ext && /^(jpg|JPG|png|PNG|gif|GIF)$/.test(ext))) { 
    alert("您上传的图片格式不对,请重新选择!"); 
    return false; 
   } 
  }, 
  onComplete: function(file, response) { 
   flagValue = response; 
   if (flagValue == "1") { 
    alert("您上传的图片格式不对,请重新选择!"); 
   } 
   else if (flagValue == "2") { 
    alert("您上传的图片大于200K,请重新选择!"); 
   } 
   else if (flagValue == "3") { 
    alert("图片上传失败!"); 
   } 
   else { 
    hidPut.value = response; 
    img.src = g_AjxTempDir + response; 
   } 
  } 
 }); 
} 

//删除文档 
function DelFile(doc, hidPut) { 
 hidPut.value = ""; 
 doc.innerHTML = "<input type="text" disabled="disabled" />"; 
} 

//删除图片 
function DelImg(img, hidPut) { 
 hidPut.value = ""; 
 img.src = "/images/nophoto.gif"; 
} 

4、创造/Common/UploadHandler.ashx管理程序

4、创造/Common/UploadHandler.ashx管理程序

<%@ WebHandler Language="C#" Class="UploadHandler" %> 

using System; 
using System.Web; 
using System.Text.RegularExpressions; 
using System.IO; 

public class UploadHandler : IHttpHandler { 
 private string _filedir = ""; //文件目录 
 /// <summary> 
 /// 处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功) 
 /// </summary> 
 /// <param name="context"></param> 
 public void ProcessRequest (HttpContext context) { 
 _filedir = context.Server.MapPath(@"/file/temp/"); 
 try 
 { 
 string result = "3"; 
 string fileType = context.Request.QueryString["fileType"]; //获取上传文件类型 
 if (fileType == "file") 
 { 
 result = UploadFile(context); //文档上传 
 } 
 else if (fileType == "img") 
 { 
 result = UploadImg(context); //图片上传 
 } 
 context.Response.Write(result); 
 } 
 catch 
 { 
 context.Response.Write("3");//3文件上传失败 
 } 
 } 

 /// <summary> 
 /// 文档上传 
 /// </summary> 
 /// <param name="context"></param> 
 /// <returns></returns> 
 private string UploadFile(HttpContext context) 
 { 
 int cout = context.Request.Files.Count; 
 if (cout > 0) 
 { 
 HttpPostedFile hpf = context.Request.Files[0]; 
 if (hpf != null) 
 { 
 string fileExt = Path.GetExtension(hpf.FileName).ToLower(); 
 //只能上传文件,过滤不可上传的文件类型 
 string fileFilt = ".rar|.zip|.pdf|.pdfx|.txt|.csv|.xls|.xlsx|.doc|.docx......"; 
 if (fileFilt.IndexOf(fileExt) <= -1) 
 { 
  return "1"; 
 } 

 //判断文件大小 
 int length = hpf.ContentLength; 
 if (length > 2097152) 
 { 
  return "2"; 
 } 

 Random rd = new Random(); 
 DateTime nowTime = DateTime.Now; 
 string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + nowTime.Second.ToString() + rd.Next(1000, 1000000) + Path.GetExtension(hpf.FileName); 
 if (!Directory.Exists(_filedir)) 
 { 
  Directory.CreateDirectory(_filedir); 
 } 
 string fileName = _filedir + newFileName; 
 hpf.SaveAs(fileName); 
 return newFileName; 
 } 

 } 
 return "3"; 
 } 

 /// <summary> 
 /// 图片上传 
 /// </summary> 
 /// <param name="context"></param> 
 /// <returns></returns> 
 private string UploadImg(HttpContext context) 
 { 
 int cout = context.Request.Files.Count; 
 if (cout > 0) 
 { 
 HttpPostedFile hpf = context.Request.Files[0]; 
 if (hpf != null) 
 { 
 string fileExt = Path.GetExtension(hpf.FileName).ToLower(); 
 //只能上传文件,过滤不可上传的文件类型 
 string fileFilt = ".gif|.jpg|.php|.jsp|.jpeg|.png|......"; 
 if (fileFilt.IndexOf(fileExt) <= -1) 
 { 
  return "1"; 
 } 

 //判断文件大小 
 int length = hpf.ContentLength; 
 if (length > 204800) 
 { 
  return "2"; 
 } 

 Random rd = new Random(); 
 DateTime nowTime = DateTime.Now; 
 string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + nowTime.Second.ToString() + rd.Next(1000, 1000000) + Path.GetExtension(hpf.FileName); 
 if (!Directory.Exists(_filedir)) 
 { 
  Directory.CreateDirectory(_filedir); 
 } 
 string fileName = _filedir + newFileName; 
 hpf.SaveAs(fileName); 
 return newFileName; 
 } 

 } 
 return "3"; 
 } 

 #region IHttpHandler 成员 

 public bool IsReusable 
 { 
 get { throw new NotImplementedException(); } 
 } 

 #endregion 
} 
<%@ WebHandler Language="C#" Class="UploadHandler" %> 

using System; 
using System.Web; 
using System.Text.RegularExpressions; 
using System.IO; 

public class UploadHandler : IHttpHandler { 
 private string _filedir = ""; //文件目录 
 /// <summary> 
 /// 处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功) 
 /// </summary> 
 /// <param name="context"></param> 
 public void ProcessRequest (HttpContext context) { 
  _filedir = context.Server.MapPath(@"/file/temp/"); 
  try 
  { 
   string result = "3"; 
   string fileType = context.Request.QueryString["fileType"]; //获取上传文件类型 
   if (fileType == "file") 
   { 
    result = UploadFile(context); //文档上传 
   } 
   else if (fileType == "img") 
   { 
    result = UploadImg(context); //图片上传 
   } 
   context.Response.Write(result); 
  } 
  catch 
  { 
   context.Response.Write("3");//3文件上传失败 
  } 
 } 

 /// <summary> 
 /// 文档上传 
 /// </summary> 
 /// <param name="context"></param> 
 /// <returns></returns> 
 private string UploadFile(HttpContext context) 
 { 
  int cout = context.Request.Files.Count; 
  if (cout > 0) 
  { 
   HttpPostedFile hpf = context.Request.Files[0]; 
   if (hpf != null) 
   { 
    string fileExt = Path.GetExtension(hpf.FileName).ToLower(); 
    //只能上传文件,过滤不可上传的文件类型 
    string fileFilt = ".rar|.zip|.pdf|.pdfx|.txt|.csv|.xls|.xlsx|.doc|.docx......"; 
    if (fileFilt.IndexOf(fileExt) <= -1) 
    { 
     return "1"; 
    } 

    //判断文件大小 
    int length = hpf.ContentLength; 
    if (length > 2097152) 
    { 
     return "2"; 
    } 

    Random rd = new Random(); 
    DateTime nowTime = DateTime.Now; 
    string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + nowTime.Second.ToString() + rd.Next(1000, 1000000) + Path.GetExtension(hpf.FileName); 
    if (!Directory.Exists(_filedir)) 
    { 
     Directory.CreateDirectory(_filedir); 
    } 
    string fileName = _filedir + newFileName; 
    hpf.SaveAs(fileName); 
    return newFileName; 
   } 

  } 
  return "3"; 
 } 

 /// <summary> 
 /// 图片上传 
 /// </summary> 
 /// <param name="context"></param> 
 /// <returns></returns> 
 private string UploadImg(HttpContext context) 
 { 
  int cout = context.Request.Files.Count; 
  if (cout > 0) 
  { 
   HttpPostedFile hpf = context.Request.Files[0]; 
   if (hpf != null) 
   { 
    string fileExt = Path.GetExtension(hpf.FileName).ToLower(); 
    //只能上传文件,过滤不可上传的文件类型 
    string fileFilt = ".gif|.jpg|.php|.jsp|.jpeg|.png|......"; 
    if (fileFilt.IndexOf(fileExt) <= -1) 
    { 
     return "1"; 
    } 

    //判断文件大小 
    int length = hpf.ContentLength; 
    if (length > 204800) 
    { 
     return "2"; 
    } 

    Random rd = new Random(); 
    DateTime nowTime = DateTime.Now; 
    string newFileName = nowTime.Year.ToString() + nowTime.Month.ToString() + nowTime.Day.ToString() + nowTime.Hour.ToString() + nowTime.Minute.ToString() + nowTime.Second.ToString() + rd.Next(1000, 1000000) + Path.GetExtension(hpf.FileName); 
    if (!Directory.Exists(_filedir)) 
    { 
     Directory.CreateDirectory(_filedir); 
    } 
    string fileName = _filedir + newFileName; 
    hpf.SaveAs(fileName); 
    return newFileName; 
   } 

  } 
  return "3"; 
 } 

 #region IHttpHandler 成员 

 public bool IsReusable 
 { 
  get { throw new NotImplementedException(); } 
 } 

 #endregion 
} 

附件1:页面CSS样式

附件1:页面CSS样式

/*上传文件*/ 
.uploadFile{margin-bottom:10px;} 
/*上传图片*/ 
.uploadImg{} 
.uploadImg img{width:102px; height:64px; border:1px solid #CCCCCC; display: block;} 
/*上传文件*/ 
.uploadFile{margin-bottom:10px;} 
/*上传图片*/ 
.uploadImg{} 
.uploadImg img{width:102px; height:64px; border:1px solid #CCCCCC; display: block;} 

附件2:AjaxUpload.js文件

附件2: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(); 
 } 
 }; 
})(); 
/** 
 * 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(); 
  } 
 }; 
})(); 

以上便是本文的全体内容,希望对大家的读书抱有扶助,也盼望大家多多援救脚本之家。

越来越多美貌内容请参照他事他说加以考察专项论题《ajax上传技巧汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》张开课习。

您恐怕感兴趣的作品:

  • SpringMVC结合ajaxfileupload.js完毕文件无刷新上传
  • 动用ajaxfileupload.js完结上传文件作用
  • jQuery插件ajaxfileupload.js完成上传文件
  • js ajaxfileupload.js上传报错的化解措施
  • JQuery插件ajaxfileupload.js异步上传文件实例
  • asp.net+ajaxfileupload.js 完成文件异步上传代码分享
  • ajaxFileUpload.js插件帮衬多文本上传的主意
  • 选择ajaxfileupload.js达成ajax上传文件php版
  • 叁个粗略的jQuery插件ajaxfileupload.js完成ajax上传文件例子
  • 使用AjaxFileUpload.js达成异步文件上传示例

上述正是ajaxupload完成公文上传操作的详细代码,希望对大家的上学抱有接济。

您恐怕感兴趣的篇章:

  • 应用jQuery ajaxupload插件完结无刷新上传文件
  • 依照Ajaxupload的多文件上传操作

本文由小鱼儿玄机二站发布于操作系统,转载请注明出处:jquery插件ajaxupload完成文件上传操作,js达成文件

关键词: