AjaxUpLoad.js实现文件上传功能

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了AjaxUpLoad.js实现文件上传功能，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

文件上传前

文件上传后

1、创建页面并编写HTML

上传文档:

上传图片:

2、引用AjaxUpload.js文件

3、编写JS脚本

//初始化
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,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="" + response + "";
}
}
});
}
//图片上传
function g_AjxUploadImg(btn,hidPut) {
var button = btn,{
action: '/Common/UploadHandler.ashx?fileType=img',ext) {
if (!(ext && /^(jpg|JPG|png|PNG|gif|GIF)$/.test(ext))) {
alert("您上传的图片格式不对，请重新选择！");
return false;
}
},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处理程序

using System;
using System.Web;
using System.Text.RegularExpressions;
using System.IO;

public class UploadHandler : IHttpHandler {
private string _filedir = ""; //文件目录
///


/// 处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功)
///
/// <param name="context">
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文件上传失败
}
}

///


/// 文档上传
///
/// <param name="context">
///
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";
}

///


/// 图片上传
///
/// <param name="context">
///
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文件

/**

  • 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,right,bottom
    */

function getBox(el) {
var left,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,// 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
  • */ _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','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,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('