m.lom599.com_手机版乐白家网址_乐百家手机首页登录

JavaScript中各种引用类型的常用操作方法小结,

作者: 手机版乐白家网址  发布:2019-07-10

Object类型

什么是柯里化

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

Array类型 重排序方法: compare
升序:

柯里化是这样的一个转换过程,把接受多个参数的函数变换成接受一个单一参数(译注:最初函数的第一个参数)的函数,如果其他的参数是必要的,返回接受余下的参数且返回结果的新函数。

图片 1

function compare(value1, value2){
  if (value1<value2){
    return -1;
  }
  if (value1>value2){
    return 1;
  } else{
    return 0;
  }
}
var values = [0,1,5,10,15];
values.sort(compare);
console.log(values); // [0,1,5,10,15]

柯理化函数思想:一个js预先处理的思想;利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可;

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> 
function compare(value1, value2){
  if (value1<value2){
    return 1;
  }
  if (value1>value2){
    return -1;
  } else{
    return 0;
  }
}

bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context;

上传图片: 

slice: slice(start, end); slice()方法返回从参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起死和结束位置之间的项,但不包括结束位置的项。

bind方法实现原理1代码如下所示:

<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> 
var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);

console.log(colors2); // green, blue, yellow, purple
console.log(colors3); // green, blue, yellow
/**
* bind方法实现原理1
* @param callback [Function] 回调函数
* @param context [Object] 上下文
* @returns {Function} 改变this指向的函数
*/
function bind(callback,context) {
var outerArg = Array.prototype.slice.call(arguments,2);// 表示取当前作用域中传的参数中除了fn,context以外后面的参数;
return function (){
var innerArg = Array.prototype.slice.call(arguments,0);//表示取当前作用域中所有的arguments参数;
callback.apply(context,outerArg.concat(innerArg));
}
} 

2、引用AjaxUpload.js文件
<script src="/js/common/AjaxUpload.js" type="text/javascript"></script> 
3、编写JS脚本

splice: splice()有删除,插入,替换的功能

下面一段代码模仿在原型链上的bind实现原理

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

删除: 需要两个参数,要删除的第一项的位置和要删除的项数。

/**
* 模仿在原型链上的bind实现原理(柯理化函数思想)
* @param context [Object] 上下文
* @returns {Function} 改变this指向的函数
*/
Function.prototype.mybind = function mybind (context) {
var _this = this;
var outArg = Array.prototype.slice.call(arguments,1);
// 兼容情况下
if('bind' in Function.prototype) {
return this.bind.apply(this,[context].concat(outArg));
}
// 不兼容情况下
return function () {
var inArg = Array.prototype.slice.call(arguments,0);
inArg.length === 0?inArg[inArg.length]=window.event:null;
var arg = outArg.concat(inArg);
_this.apply(context,arg);
}
}

4、创建/Common/UploadHandler.ashx处理程序

var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1);
console.log(colors); // greeen, blue
console.log(removed); // red

函数柯里化(Currying)

<%@ 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 
} 

插入: 需要三个参数:起始位置、0(要删除的项数)和要插入的项

在计算机科学中,柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术

附件1:页面CSS样式

var colors = ["red", "green", "blue"];
var removed = colors.splice(1,0,"yellow", "orange");
console.log(colors); // ["red", "yellow", "orange", "green", "blue"]
console.log(removed); // 返回空

柯里化就是预先将某些参数传入,得到一个简单的函数。但是预先传入的参数被保存在闭包中,因此会有一些奇特的特性。比如:

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

替换: 需要三个参数:起始位置、要删除的项数和要插入的任意数量的项。

例:

附件2:AjaxUpload.js文件

var colors = ["red", "green", "blue"];
var removed = colors.splice(1,1,"yellow", "orange");
console.log(colors); // ["red", "yellow", "orange", "blue"]
console.log(removed); // ["green"]
var adder = function(num) {
return function(y) {
return num   y;
}
}
var inc = adder(1);
var dec = adder(-1);
//inc, dec现在是两个新的函数,作用是将传入的参数值( /-)1
alert(inc(99));//100
alert(dec(101));//100
alert(adder(100)(2));//102
alert(adder(2)(100));//102
/** 
 * 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:'';" || 
  // 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(); 
 } 
 }; 
})(); 

Date类型
RegExp类型

以上内容是小编给大家介绍的JavaScript函数柯里化及实现bind方法的方法,希望对大家有所帮助!

以上就是为大家介绍的ajaxfileupload.js实现上传文件的简单小例子,希望大家喜欢。

var pattern1 = /[bc]/i;
var pattern2 = new RegExp("[bc]at", "i");

您可能感兴趣的文章:

  • javascript性能优化之分时函数的介绍
  • JavaScript中的高级函数
  • 深入解析JavaScript中函数的Currying柯里化
  • javascript中有趣的反柯里化深入分析
  • javascript中利用柯里化函数实现bind方法
  • 深入剖析JavaScript中的函数currying柯里化
  • javascript中利用柯里化函数实现bind方法【推荐】
  • 深入浅出理解JavaScript高级定时器原理与用法
  • Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
  • js定时器的使用(实例讲解)
  • JavaScript高级函数应用之分时函数实例分析

相关阅读:

pattern1和pattern2是两个完全等价的正则表达式。要注意的是,传递给RegExp构造函数的两个参数都是字符串(不能把正则表达式字面量传递给RegExp构造函数)。由于RegExp构造函数的模式参数是字符串,所以在某些情况下要对字符串进行双重转义。

js ajaxfileupload.js上传报错的解决方法

var pattern1 = /[bc]/i;
var pattern2 = new RegExp("\[bc\]at", "i");

jQuery插件AjaxFileUpload实现ajax文件上传

RegExp实例方法
exec

就为大家分享到这,之后会有更多精彩内容不要错过。

exec接收一个参数,即要应用模式的字符串,然后返回包含第一个匹配信息的数组。

更多精彩内容,请点击《jQuery上传操作汇总》,《ajax上传技术汇总》进行深入学习和研究。

var text = "cat, bat, sat, fat";
var pattern1 = /.at/;

var matches = pattern1.exec(text);
console.log(matches); // ["cat"]

您可能感兴趣的文章:

  • SpringMVC结合ajaxfileupload.js实现文件无刷新上传
  • 使用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.js实现文件上传功能

match match是字符串执行匹配正则表达式规则的方法,他的参数是正则表达

var text = "cat, bat, sat, fat";
var pattern1 = /.at/;

var matches2 = text.match(pattern1);
console.log(matches2); // ["cat"]

test test()接收一个字符串参数

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:JavaScript中各种引用类型的常用操作方法小结,

关键词: m.lom599.com