<p 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="删除" />

</p>

<p 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="删除" />

</p>

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

}

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

}

/*上传文件*/

.uploadFile{margin-bottom:10px;}

/*上传图片*/

.uploadImg{}

.uploadImg img{width:102px; height:64px; border:1px solid #CCCCCC; display: block;}

/**

 * 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 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.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

  * <p><input type='file' /></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 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

  // p -> 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();

 }

 };

})();