当前位置: 移动技术网 > IT编程>开发语言>JavaScript > AjaxUpLoad.js实现文件上传功能

AjaxUpLoad.js实现文件上传功能

2019年06月07日  | 移动技术网IT编程  | 我要评论

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

图1 文件上传前

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网