ajaxfileupload.js实现文件上传（附步骤代码）

来源：互联网 2024-10-07 15:08:07

这次给大家带来ajaxfileupload.js实现文件上传（附步骤代码），ajaxfileupload.js实现文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。

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

1、创建页面并编写HTML上传文档:

<p>  <span><input></span>  <input>  <input>  <input> </p>

上传图片:

<p>  <img  alt="ajaxfileupload.js实现文件上传（附步骤代码）" >  <input>  <input>  <input> </p>

2、引用AjaxUpload.js文件

3、编写JS脚本

window.onload = function() {  init(); //初始化 }  //初始化 function init() {  //初始化文档上传  var btnFile = document.getElementById("btnUploadFile");  var doc = document.getElementById("doc");  var hidFilename = document.getElementById("hidFileName");  document.getElementById("btnDeleteFile").onclick = function() { DelFile(doc, hidFileName); };  g_AjxUploadFile(btnFile, doc, hidFileName);   //初始化图片上传  var btnImg = document.getElementById("btnUploadImg");  var img = document.getElementById("imgShow");  var hidImgName = document.getElementById("hidImgName");  document.getElementById("btnDeleteImg").onclick = function() { DelImg(img, hidImgName); };  g_AjxUploadImg(btnImg, img, hidImgName); }   var g_AjxTempDir = "/file/temp/"; //文档上传 function g_AjxUploadFile(btn, doc, hidPut, action) {  var button = btn, interval;  new AjaxUpload(button, {  action: ((action == null || action == undefined) ? '/Common/UploadHandler.ashx?fileType=file' : action),  data: {},  name: 'myfile',  onSubmit: function(file, ext) {   if (!(ext &amp;&amp; /^(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>" + 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 &amp;&amp; /^(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>"; }  //删除图片 function DelImg(img, hidPut) {  hidPut.value = "";  img.src = "/images/nophoto.gif"; }

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

  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>  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>  /// <returns></returns>  private string UploadFile(HttpContext context)  {  int cout = context.Request.Files.Count;  if (cout &gt; 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)  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>  /// <returns></returns>  private string UploadImg(HttpContext context)  {  int cout = context.Request.Files.Count;  if (cout &gt; 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)  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' &amp;&amp; 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 &gt; 1) {   clientTop = 0;   clientLeft = 0;   }    var top = box.top / zoom + (window.pageYOffset || docElem &amp;&amp; docElem.scrollTop / zoom || body.scrollTop / zoom) - clientTop,   left = box.left / zoom + (window.pageXOffset || docElem &amp;&amp; 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 p = document.createElement('p');  return function (html) {   p.innerHTML = html;   var el = p.firstChild;   return p.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.ｒｅｐｌａｃｅ(/.*(\/|\\)/, "");  }   /**  * Get file extension lowercase  * @param {String} file name  * @return file extenstion  */   function getExt(file) {  return (-1 !== file.indexOf('.')) ? file.ｒｅｐｌａｃｅ(/.*[.]/, '') : '';  }   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.ｒｅｐｌａｃｅ(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 ｓｃｒｉｐｔ   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 &amp;&amp; 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   * <p><input></p>   */  _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 p = document.createElement("p");   addStyles(p, {   '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 (p.style.opacity !== "0") {   if (typeof(p.filters) == 'undefined') {    throw new Error('Opacity not supported by the browser');   }   p.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';    });    p.appendChild(input);   document.body.appendChild(p);    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 p = self._input.parentNode;   copyLayout(self._button, p);   p.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></iframe>');   // 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.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:'';") { // First time around, do not ｄｅｌｅｔｅ. // 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

    // 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 &amp;&amp; doc.body.firstChild.nodeName.toUpperCase() == 'PRE') {     response = doc.body.firstChild.firstChild.nodeValue;    }     if (response) {     response = ｅｖａｌ("(" + 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   // ｄｅｌｅｔｅ the frame   toDeleteFlag = true;    // Fix IE mixed content issue   iframe.src = "javascript:'';";   });  },  /**   * 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   // p -&gt; 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();  }  }; })();

相信看了本文案例你已经掌握了方法，更多精彩请关注本站其它相关文章！