jquery插件ajaxupload实现文件上传操作


Posted in Javascript onDecember 09, 2015

本文实例讲述了jquery插件ajaxupload实现文件上传操作代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

jquery插件ajaxupload实现文件上传操作

图1 文件上传前

jquery插件ajaxupload实现文件上传操作

图2 文件上传后

具体代码如下:

1、创建页面并编写HTML

上传文档: 

<div class="uploadFile"> 
 <span id="doc"><input type="text" disabled="disabled" /></span> 
 <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>

2、引用AjaxUpload.js文件

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

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"; 
}

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 
}

附件1:页面CSS样式

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

附件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上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是ajaxupload实现文件上传操作的详细代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
es6 symbol的实现方法示例
Apr 02 Javascript
js实现弹框效果
Mar 24 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 #Javascript
javascript如何写热点图
Dec 08 #Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 #Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 #Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 #Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 #Javascript
基于JavaScript创建动态Dom
Dec 08 #Javascript
You might like
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
成语的广告词
2014/03/19 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
乱世佳人观后感
2015/06/08 职场文书
python requests模块的使用示例
2021/04/07 Python
超级详细实用的pycharm常用快捷键
2021/05/12 Python
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android