本文主要为大家详细介绍了ajaxupload.js实现文件上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
ajaxupload.js的使用实现无刷新文件上传，如图。
图1 文件上传前
图2 文件上传后
1、创建页面并编写html
上传文档:
<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>
2、引用ajaxupload.js文件
<script src="/js/common/ajaxupload.js" type="text/javascript"></script>
3、编写js脚本
window.onload = function() {
init(); //初始化
}
//初始化
function init() {
//初始化文档上传
var btnfile = document.getelementbyid("btnuploadfile");
var doc = document.getelementbyid("doc");
var hidfilename = document.getelementbyid("hidfilename");
document.getelementbyid("btndeletefile").onclick = function() { delfile(doc, hidfilename); };
g_ajxuploadfile(btnfile, doc, hidfilename);
//初始化图片上传
var btnimg = document.getelementbyid("btnuploadimg");
var img = document.getelementbyid("imgshow");
var hidimgname = document.getelementbyid("hidimgname");
document.getelementbyid("btndeleteimg").onclick = function() { delimg(img, hidimgname); };
g_ajxuploadimg(btnimg, img, hidimgname);
}
var g_ajxtempdir = "/file/temp/";
//文档上传
function g_ajxuploadfile(btn, doc, hidput, action) {
var button = btn, interval;
new ajaxupload(button, {
action: ((action == null || action == undefined) ? '/common/uploadhandler.ashx?filetype=file' : action),
data: {},
name: 'myfile',
onsubmit: function(file, ext) {
if (!(ext && /^(rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx|rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx)$/.test(ext))) {
alert("您上传的文档格式不对，请重新选择！");
return false;
}
},
oncomplete: function(file, response) {
flagvalue = response;
if (flagvalue == "1") {
alert("您上传的文档格式不对，请重新选择！");
}
else if (flagvalue == "2") {
alert("您上传的文档大于2m，请重新选择！");
}
else if (flagvalue == "3") {
alert("文档上传失败！");
}
else {
hidput.value = response;
doc.innerhtml="<a href='" + g_ajxtempdir + response + "' target='_blank'>" + response + "</a>";
}
}
});
}
//图片上传
function g_ajxuploadimg(btn, img, hidput) {
var button = btn, interval;
new ajaxupload(button, {
action: '/common/uploadhandler.ashx?filetype=img',
data: {},
name: 'myfile',
onsubmit: function(file, ext) {
if (!(ext && /^(jpg|jpg|png|png|gif|gif)$/.test(ext))) {
alert("您上传的图片格式不对，请重新选择！");
return false;
}
},
oncomplete: function(file, response) {
flagvalue = response;
if (flagvalue == "1") {
alert("您上传的图片格式不对，请重新选择！");
}
else if (flagvalue == "2") {
alert("您上传的图片大于200k，请重新选择！");
}
else if (flagvalue == "3") {
alert("图片上传失败！");
}
else {
hidput.value = response;
img.src = g_ajxtempdir + response;
}
}
});
}
//删除文档
function delfile(doc, hidput) {
hidput.value = "";
doc.innerhtml = "<input type=\"text\" disabled=\"disabled\" />";
}
//删除图片
function delimg(img, hidput) {
hidput.value = "";
img.src = "/images/nophoto.gif";
}
4、创建/common/uploadhandler.ashx处理程序
<%@ webhandler language="c#" class="uploadhandler" %>
using system;
using system.web;
using system.text.regularexpressions;
using system.io;
public class uploadhandler : ihttphandler {
private string _filedir = ""; //文件目录
/// <summary>
/// 处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功)
/// </summary>
/// <param name="context"></param>
public void processrequest (httpcontext context) {
_filedir = context.server.mappath(@"/file/temp/");
try
{
string result = "3";
string filetype = context.request.querystring["filetype"]; //获取上传文件类型
if (filetype == "file")
{
result = uploadfile(context); //文档上传
}
else if (filetype == "img")
{
result = uploadimg(context); //图片上传
}
context.response.write(result);
}
catch
{
context.response.write("3");//3文件上传失败
}
}
/// <summary>
/// 文档上传
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
private string uploadfile(httpcontext context)
{
int cout = context.request.files.count;
if (cout > 0)
{
httppostedfile hpf = context.request.files[0];
if (hpf != null)
{
string fileext = path.getextension(hpf.filename).tolower();
//只能上传文件，过滤不可上传的文件类型
string filefilt = ".rar|.zip|.pdf|.pdfx|.txt|.csv|.xls|.xlsx|.doc|.docx......";
if (filefilt.indexof(fileext) <= -1)
{
return "1";
}
//判断文件大小
int length = hpf.contentlength;
if (length > 2097152)
{
return "2";
}
random rd = new random();
datetime nowtime = datetime.now;
string newfilename = nowtime.year.tostring() + nowtime.month.tostring() + nowtime.day.tostring() + nowtime.hour.tostring() + nowtime.minute.tostring() + nowtime.second.tostring() + rd.next(1000, 1000000) + path.getextension(hpf.filename);
if (!directory.exists(_filedir))
{
directory.createdirectory(_filedir);
}
string filename = _filedir + newfilename;
hpf.saveas(filename);
return newfilename;
}
}
return "3";
}
/// <summary>
/// 图片上传
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
private string uploadimg(httpcontext context)
{
int cout = context.request.files.count;
if (cout > 0)
{
httppostedfile hpf = context.request.files[0];
if (hpf != null)
{
string fileext = path.getextension(hpf.filename).tolower();
//只能上传文件，过滤不可上传的文件类型
string filefilt = ".gif|.jpg|.php|.jsp|.jpeg|.png|......";
if (filefilt.indexof(fileext) <= -1)
{
return "1";
}
//判断文件大小
int length = hpf.contentlength;
if (length > 204800)
{
return "2";
}
random rd = new random();
datetime nowtime = datetime.now;
string newfilename = nowtime.year.tostring() + nowtime.month.tostring() + nowtime.day.tostring() + nowtime.hour.tostring() + nowtime.minute.tostring() + nowtime.second.tostring() + rd.next(1000, 1000000) + path.getextension(hpf.filename);
if (!directory.exists(_filedir))
{
directory.createdirectory(_filedir);
}
string filename = _filedir + newfilename;
hpf.saveas(filename);
return newfilename;
}
}
return "3";
}
#region ihttphandler 成员
public bool isreusable
{
get { throw new notimplementedexception(); }
}
#endregion
}
附件1：页面css样式
/*上传文件*/
.uploadfile{margin-bottom:10px;}
/*上传图片*/
.uploadimg{}
.uploadimg img{width:102px; height:64px; border:1px solid #cccccc; display: block;}
附件2：ajaxupload.js文件
/**
* ajax upload ( http://valums.com/ajax-upload/ )
* copyright (c) andris valums
* licensed under the mit license ( http://valums.com/mit-license/ )
* thanks to gary haran, david mark, corey burns and others for contributions
*/
(function () {
/* global window */
/* jslint browser: true, devel: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true */
/**
* wrapper for firebug's console.log
*/
function log() {
if (typeof(console) != 'undefined' && typeof(console.log) == 'function') {
array.prototype.unshift.call(arguments, '[ajax upload]');
console.log(array.prototype.join.call(arguments, ' '));
}
}
/**
* attaches event to a dom element.
* @param {element} el
* @param type event name
* @param fn callback this refers to the passed element
*/
function addevent(el, type, fn) {
if (el.addeventlistener) {
el.addeventlistener(type, fn, false);
} else if (el.attachevent) {
el.attachevent('on' + type, function () {
fn.call(el);
});
} else {
throw new error('not supported or dom not loaded');
}
}
/**
* attaches resize event to a window, limiting
* number of event fired. fires only when encounteres
* delay of 100 after series of events.
*
* some browsers fire event multiple times when resizing
* http://www.quirksmode.org/dom/events/resize.html
*
* @param fn callback this refers to the passed element
*/
function addresizeevent(fn) {
var timeout;
addevent(window, 'resize', function () {
if (timeout) {
cleartimeout(timeout);
}
timeout = settimeout(fn, 100);
});
}
// needs more testing, will be rewriten for next version
// getoffset function copied from jquery lib (http://jquery.com/)
if (document.documentelement.getboundingclientrect) {
// get offset using getboundingclientrect
// http://ejohn.org/blog/getboundingclientrect-is-awesome/
var getoffset = function (el) {
var box = el.getboundingclientrect();
var doc = el.ownerdocument;
var body = doc.body;
var docelem = doc.documentelement; // for ie
var clienttop = docelem.clienttop || body.clienttop || 0;
var clientleft = docelem.clientleft || body.clientleft || 0;
// in internet explorer 7 getboundingclientrect property is treated as physical,
// while others are logical. make all logical, like in ie8.
var zoom = 1;
if (body.getboundingclientrect) {
var bound = body.getboundingclientrect();
zoom = (bound.right - bound.left) / body.clientwidth;
}
if (zoom > 1) {
clienttop = 0;
clientleft = 0;
}
var top = box.top / zoom + (window.pageyoffset || docelem && docelem.scrolltop / zoom || body.scrolltop / zoom) - clienttop,
left = box.left / zoom + (window.pagexoffset || docelem && docelem.scrollleft / zoom || body.scrollleft / zoom) - clientleft;
return {
top: top,
left: left
};
};
} else {
// get offset adding all offsets
var getoffset = function (el) {
var top = 0,
left = 0;
do {
top += el.offsettop || 0;
left += el.offsetleft || 0;
el = el.offsetparent;
} while (el);
return {
left: left,
top: top
};
};
}
/**
* returns left, top, right and bottom properties describing the border-box,
* in pixels, with the top-left relative to the body
* @param {element} el
* @return {object} contains left, top, right,bottom
*/
function getbox(el) {
var left, right, top, bottom;
var offset = getoffset(el);
left = offset.left;
top = offset.top;
right = left + el.offsetwidth;
bottom = top + el.offsetheight;
return {
left: left,
right: right,
top: top,
bottom: bottom
};
}
/**
* helper that takes object literal
* and add all properties to element.style
* @param {element} el
* @param {object} styles
*/
function addstyles(el, styles) {
for (var name in styles) {
if (styles.hasownproperty(name)) {
el.style[name] = styles[name];
}
}
}
/**
* function places an absolutely positioned
* element on top of the specified element
* copying position and dimentions.
* @param {element} from
* @param {element} to
*/
function copylayout(from, to) {
var box = getbox(from);
addstyles(to, {
position: 'absolute',
left: box.left + 'px',
top: box.top + 'px',
width: from.offsetwidth + 'px',
height: from.offsetheight + 'px'
});
}
/**
* creates and returns element from html chunk
* uses innerhtml to create an element
*/
var toelement = (function () {
var 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();
}
};
})();
相关推荐：
laravel和ajax实现文件上传功能
ajax配合spring实现文件上传功能代码
详解使用nodejs+express实现简单的文件上传功能
以上就是ajaxupload.js如何实现文件上传功能的详细内容。