AjaxUpLoad.js实现文件上传功能


Posted in Javascript onMarch 02, 2018

AjaxUpLoad.js的使用实现无刷新文件上传,如图。

AjaxUpLoad.js实现文件上传功能

图1 文件上传前

AjaxUpLoad.js实现文件上传功能

图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(); 
 } 
 }; 
})();

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

Javascript 相关文章推荐
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
js实现删除li标签一行内容
Apr 16 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 #Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 #Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 #Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 #Javascript
vue element-ui table表格滚动加载方法
Mar 02 #Javascript
浅谈React组件之性能优化
Mar 02 #Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 #Javascript
You might like
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
实例讲解php实现多线程
2019/01/27 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
玩转python爬虫之cookie使用方法
2016/02/17 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
pymysql模块的操作实例
2019/12/17 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
通过Python实现一个简单的html页面
2020/05/16 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
什么是数组名
2012/05/10 面试题
营业员实习自我鉴定
2013/12/07 职场文书
自荐信写法介绍
2014/01/25 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
测控技术自荐信
2014/06/05 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
观看建国大业观后感
2015/06/01 职场文书
诚信高考倡议书
2019/06/24 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
vue里使用create, mounted调用方法
2022/04/26 Vue.js