这篇文章主要为大家详细介绍了jQuery插件ajaxfileupload.js实现上传文件的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
AjaxUpLoad.js的使用实现无刷新文件上传,如图
1、创建页面并编写HTML
上传文档:
div class='uploadFile '
span id='doc '输入类型=' text ' disabled=' disabled '/span
输入类型='hidden' id='hidFileName' /
输入类型=' button ' id=' btnUploadFile ' value='上传' /
输入类型=' button ' id=' BTN删除文件' value='删除' /
/div
上传图片:
div class='上传'
img id=' img show ' src='/images/无照片。gif '/
输入类型='hidden' id='hidImgName' /
输入类型=' button ' id=' btnUploadImg ' value='上传' /
输入类型=' button ' id=' btnDeleteImg ' value='删除' /
/div
2、引用AjaxUpload.js文件
脚本src='/js/common/ajaxupload。js ' type=' text/JavaScript '/script
3、编写JS脚本
window.onload=function() {
init();//初始化
}
//初始化
函数init() {
//初始化文档上传
var BTN文件=文档。getelementbyid(' btnUploadFile ');
var doc=文档。getelementbyid(' doc ');
var hid文件名=文档。getelementbyid(“hid文件名”);
文档。getelementbyid(“BTN删除文件”).onclick=function() { DelFile(doc,hid文件名);};
g_AjxUploadFile(btnFile,doc,hid文件名);
//初始化图片上传
var Bt nimg=文档。getelementbyid(' btnUploadImg ');
var img=文档。getelementbyid(' img show ');
var hidImgName=document。getelementbyid(' hidImgName ');
文档。getelementbyid(' btnDeleteImg ').onclick=function() { DelImg(img,hidImgName);};
g_AjxUploadImg(btnImg,Img,hidImgName);
}
var g _ AjxTempDir='/file/temp/';
//文档上传
函数g_AjxUploadFile(btn,doc,hidPut,action) {
var button=btn,区间;
新AjaxUpload(按钮,{
动作:((action==空| | action==未定义)?/Common/UploadHandler.ashx?fileType=file ':动作),
数据:{},
名称:"我的文件",
onSubmit: function(file,ext) {
如果(!(/^(rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx|rar|zip|pdf|pdfx|txt|csv|xls|xlsx|doc|docx)$/.分机测试(外部))){
警报('您上传的文档格式不对,请重新选择!');
返回错误的
}
},
完成时:函数(文件、响应){
标志值=响应;
if (flagValue=='1') {
警报('您上传的文档格式不对,请重新选择!');
}
else if (flagValue=='2') {
警报('您上传的文档大于2M,请重新选择!');
}
else if (flagValue=='3') {
警报('文档上传失败!');
}
否则{
hidPut.value=响应
医生。innerhtml=' a href=' ' g _ AjxTempDir response ' ' target=' _ blank ' ' response '/a;
}
}
});
}
//图片上传
函数g_AjxUploadImg(btn,Img,hidPut) {
var button=btn,区间;
新AjaxUpload(按钮,{
操作:"/Common/UploadHandler.ashx?fileType=img ',
数据:{},
名称:"我的文件",
onSubmit: function(file,ext) {
如果(!(/^(jpg|JPG|png|PNG|gif|GIF)$/.分机测试(外部))){
警报('您上传的图片格式不对,请重新选择!');
返回错误的
}
},
完成时:函数(文件、响应){
标志值=响应;
if (flagValue=='1') {
警报('您上传的图片格式不对,请重新选择!');
}
else if (flagValue=='2') {
警报('您上传的图片大于20万,请重新选择!');
}
else if (flagValue=='3') {
警报('图片上传失败!');
}
否则{
hidPut.value=响应
img.src=g_AjxTempDir响应;
}
}
});
}
//删除文档
函数DelFile(doc,hidPut) {
藏起来了。值=" ";
医生。innerhtml=' input type=' text ' disabled=' disabled '/';
}
//删除图片
函数交付(Img,hidPut) {
藏起来了。值=" ";
img。src='/images/无照片。gif ';
}
4、创建/Common/UploadHandler.ashx处理程序
% @ web handler Language=' c# ' Class=' upload handler ' %
使用系统;
使用系统网页。
使用系统正文。正则表达式;
使用系统。木卫一;
公共类上传处理程序:IHttpHandler {
私有string _ filedir=//文件目录
///摘要
///处理上传文件(1:文件格式不正确、2:文件大小不正确、3:上传失败、文件名称:上传成功)
////摘要
///param name='context'/param
公共void ProcessRequest (HttpContext上下文){
_filedir=上下文服务器。MapPath(@ '/file/temp/');
尝试
{
字符串结果="3";
字符串文件类型=上下文请求。查询字符串[' fileType '];//获取上传文件类型
if (fileType=='file ')
{
结果=上传文件(上下文);//文档上传
}
else if (fileType=='img ')
{
结果=上传(上下文);//图片上传
}
语境100 .回应。写(结果);
}
捕捉
{
语境100 .回应。写(' 3 ');//3文件上传失败
}
}
///摘要
///文档上传
////摘要
///param name='context'/param
///返回/返回
私有字符串上传文件(HttpContext上下文)
{
int cout=上下文请求。文件数
if (cout 0)
{
HttpPostedFile hpf=context .请求。文件[0];
如果(hpf!=空)
{
string fileExt=Path .GetExtension(hpf .文件名)。降低();
//只能上传文件,过滤不可上传的文件类型
字符串fileFilt=' .rar| .zip| .pdf| .pdfx| .txt| .csv| .xls| .xlsx| .doc| .docx . ';
if (fileFilt .IndexOf(fileExt)=-1)
{
返回"1";
}
//判断文件大小
(同Internationalorganizations)国际组织长度=hpf .内容长度
如果(长度2097152)
{
返回"2";
}
Random rd=new Random();
日期时间nowTime=日期时间。现在;
string newFileName=nowTime .年份。ToString() nowTime .月份。ToString() nowTime .日。ToString() nowTime .小时。ToString() nowTime .一分钟。ToString() nowTime .第二。ToString() rd .下一个(1000,1000000)路径GetExtension(hpf .文件名);
如果(!目录。存在(_filedir))
{
目录创建目录(_ filedir);
}
string fileName=_ filedir新文件名;
hpf .另存为(文件名);
返回新文件名
}
}
返回"3";
}
///摘要
///图片上传
////摘要
///param name='context'/param
///返回/返回
私有字符串UploadImg(HttpContext上下文)
{
int cout=上下文请求。文件数
if (cout 0)
{
HttpPostedFile hpf=context .请求。文件[0];
如果(hpf!=空)
{
string fileExt=Path .GetExtension(hpf .文件名)。降低();
//只能上传文件,过滤不可上传的文件类型
字符串fileFilt=' .gif| .jpg| .php| .jsp| .jpeg| .png | ';
if (fileFilt .IndexOf(fileExt)=-1)
{
返回"1";
}
//判断文件大小
(同Internationalorganizations)国际组织长度=hpf .内容长度
如果(长度204800)
{
返回"2";
}
Random rd=new Random();
日期时间nowTime=日期时间。现在;
string newFileName=nowTime .年份。ToString() nowTime .月份。ToString() nowTime .日。ToString() nowTime .小时。ToString() nowTime .一分钟。ToString() nowTime .第二。ToString() rd .下一个(1000,1000000)路径GetExtension(hpf .文件名);
如果(!目录。存在(_filedir))
{
目录创建目录(_ filedir);
}
string fileName=_ filedir新文件名;
hpf .另存为(文件名);
返回新文件名
}
}
返回"3";
}
#区域IHttpHandler成员
公共布尔值是可重用的
{
get { throw new NotImplementedException();}
}
#结束区域
}
附件1:页面半铸钢钢性铸铁(铸造半钢)样式
/*上传文件*/。上传文件{边距-底部:10px}
/*上传图片*/。上传{}。上传img img { width:102 px;身高:64px边框:1px纯色# CCCCCC;显示:块;}
附件2:AjaxUpload.js文件
/**
* AJAX上传(http://valums.com/ajax-upload/)
*版权所有安德里斯瓦卢姆
*根据麻省理工学院许可证(http://valums.com/mit-license/)获得许可
*感谢加里哈兰、大卫马克、科里伯恩斯和其他人的贡献
*/
(函数(){
/*全局窗口*/
/* jslint browser: true,devel: true,undef: true,nomen: true,bitwise: true,regexp: true,newcap: true,immed: true */
/**
萤火虫的console.log的包装
*/
函数日志(){
如果(类型属于(控制台)!='未定义'类型的(控制台。log)==' function '){
数组。原型。联合国轮班。调用(参数,'[Ajax Upload]');
控制台。日志(数组。原型。加入。调用(arguments,' '));
}
}
/**
*将事件附加到数字正射影像图元素。
* @param {Element} el
* @param类型事件名称
* @param fn回调这是指传递的元素
*/
函数addEvent(el,type,fn) {
if (el.addEventListener) {
el.addEventListener(type,fn,false);
} else if (el.attachEvent) {
el.attachEvent('on '类型,函数(){
fn。呼叫(El);
});
}否则{
抛出新错误("不支持或未加载DOM”);
}
}
/**
*将调整大小事件附加到窗口,限制
*触发的事件数量。仅在遇到时触发
*一系列事件后延迟100。
*
*一些浏览器在调整大小时会多次触发事件
* http://www.quirksmode.org/dom/events/resize.html
*
* @param fn回调这是指传递的元素
*/
函数addResizeEvent(fn) {
定义变量超时;
addEvent(window,' resize ',function () {
如果(超时){
清除超时(超时);
}
timeout=setTimeout(fn,100);
});
}
//需要更多测试,将在下一版本中重写
//从jQuery库复制的获取偏移量函数(http://jquery.com/)
如果(文档。documentelement。getboundingclientrect){
//使用getBoundingClientRect获取偏移量
//http://e John . org/blog/getboundingclientrect-is-awesome/
var getOffset=function (el) {
var box=El。getboundingclientrect();
var doc=el.ownerDocument
var body=doc.body
var doce lem=doc。文档元素;//对于爱尔兰共和国
var client top=docelem。客户端顶部| |正文。客户端顶部| | 0;
var client left=docelem。客户左| |体。客户端左| | 0;
//在Internet Explorer 7中,getBoundingClientRect属性被视为物理属性,
//而另一些则符合逻辑。使一切合乎逻辑,就像在IE8中一样。
var zoom=1;
如果(正文。getboundingclientrect){
var bound=主体。getboundingclientrect();
缩放=(绑定。向右。左)/体。客户端宽度;
}
如果(缩放1) {
client top=0;
客户端左侧=0;
}
var top=box。顶部/缩放(窗口。页面偏移| | docElem docElem。顶部滚动/缩放| | body。顶部滚动/缩放)-客户端顶部,
左=框。向左/缩放(窗口。pagexoffset | | docElem docElem。向左滚动/缩放| | body。向左滚动/缩放)-客户端向左;
返回{
顶:顶,
左:左
};
};
}否则{
//将所有偏移量相加得到偏移量
var getOffset=function (el) {
var top=0,
左=0;
做{
top=El。offsettop | | 0;
left=El。向左偏移量| | 0;
el=el.offsetParent
} while(El);
返回{
左:左,
顶部:顶部
};
};
}
/**
*返回描述边框的左、上、右和下属性,
*以像素为单位,左上角相对于正文
* @param {Element} el
* @return {Object}包含左、上、右、下
*/
函数获取框(el) {
变量左、右、上、下;
var offset=get offset(El);
left=offset.left
top=偏移量
右=左el.offsetWidth
bottom=top el.offsetHeight
返回{
左:左,
对:对,
顶:顶,
底部:底部
};
}
/**
*接受对象文字的帮助器
*并将所有属性添加到元素.样式
* @param {Element} el
* @param {Object}样式
*/
函数addStyles(el,styles) {
对于(样式中的变量名称){
如果(风格。hasownproperty(name)){
埃尔。style[name]=styles[name];
}
}
}
/**
*函数放置一个绝对定位的
*指定元素之上的元素
*复制位置和尺寸。
* @param {Element} from
* @param {Element}到
*/
函数复制布局(从,到){
var box=get box(from);
添加样式(到,{
位置:"绝对",
left: box.left 'px ',
top: box.top 'px ',
宽度:from.offsetWidth 'px ',
高度:from.offsetHeight 'px '
});
}
/**
*从超文本标记语言块中创建并返回元素
*使用innerHTML创建元素
*/
var toElement=(function () {
var div=文档。createelement(' div ');
返回函数(html) {
div.innerHTML=html
var el=div.firstChild
返回分区。删除子项(El);
};
})();
/**
*函数生成唯一的身份证明(identification)
* @返回唯一身份证明(identification)
*/
var getUID=(function () {
var id=0;
返回函数(){
返回" ValumsAjaxUpload " id
};
})();
/**
*从路径获取文件名
* @param {String}文件的文件路径
* @返回文件名
*/
函数fileFromPath(文件){
返回file.replace(/.*(\/|\\)/, '');
}
/**
*获取小写文件扩展名
* @param {String}文件名
* @返回文件扩展名
*/
函数getExt(文件){
return (-1!==file.indexOf(' . ')) ?file.replace(/.*[.]/, '') : '';
}
函数hasClass(el,name) {
var re=new RegExp(' \ \ b ' name ' \ \ b ');
返回re。测试(El。类名);
}
函数addClass(el,name) {
如果(!hasClass(el,name)) {
el.className=' '名称
}
}
函数removeClass(el,name) {
var re=new RegExp(' \ \ b ' name ' \ \ b ');
埃尔。类名=El。类名。replace(re,' ');
}
函数删除节点(el) {
埃尔。父节点。删除子项(El);
}
/**
*轻松设计和上传
* @构造函数
* @param按钮要转换成的元素
*上传按钮。测试尺寸高达500x500px像素像素
* @param {Object}选项请参见下面的默认值。
*/
窗户AjaxUpload=function(按钮,选项){
这个. settings={
//服务器端上传脚本的位置
操作:“upload.php”,
//文件上传名称
名称:'用户文件,
//要发送的附加数据
数据:{},
//一旦选定就提交文件
自动提交:真,
//您期望从服务器返回的数据类型。
//自动检测超文本标记语言和xml .
//只有在使用json数据作为响应时才有用。
//在这种情况下设置为json .
responseType: false,
//当鼠标悬停时应用于按钮的类
悬停类:“悬停”,
//禁用埃时应用于按钮的类
残疾人类:“残疾人”,
//当用户选择文件时,在禁用自动提交时有用
//可以返回错误的取消上传
onChange:函数(文件,扩展名){},
//在上传文件之前触发回调
//可以返回错误的取消上传
onSubmit:函数(文件,扩展名){},
//文件上载完成时激发
//警告!不要使用“假”字符串作为响应!
完成时:函数(文件,响应){}
};
//将用户选项与我们的默认值合并
对于(选项中的变量I){
if (options.hasOwnProperty(i)) {
这个. settings[I]=options[I];
}
}
//按钮不一定是数字正射影像图元素
if (button.jquery) {
//jQuery对象被传递
button=button[0];
} else if(按钮类型==' string '){
如果(/^#.*/.测试(按钮)){
//如果jQuery用户传递#elementId,不要破坏它
按钮=按钮。切片(1);
}
按钮=文档。getelementbyid(button);
}
如果(!button || button.nodeType!==1) {
抛出新错误("请确保您传递的是有效元素");
}
如果(按钮。节点名。toupper case()==' A '){
//禁用链接
添加事件(按钮,'点击',函数(e) {
如果(如预防故障){
e。防止默认();
} else if (window.event) {
窗户。事件。返回值=false
}
});
}
//DOM元素
这个. button=按钮;
//DOM元素
这个. input=null
//如果禁用,单击按钮不会做任何事情
这个. disabled=false
//如果按钮在刷新前被禁用,则保持不变
//在火狐浏览器中禁用,大家来修复吧
这个。enable();
这个\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\。
};
//将方法分配给我们的类
AjaxUpload.prototype={
setData:函数(数据){
这个. settings.data=data
},
禁用:函数(){
添加类(这个.按钮,这个.设置。残疾类);
这个. disabled=true
var nodeName=this ._按钮。节点名。toupper case();
if(nodeName==' INPUT ' | | nodeName==' BUTTON '){
这个. button _ set attribute(' disabled ',' disabled ');
}
//隐藏输入
如果(这个. input) {
//我们使用可见性而不是显示来解决Safari 4的问题
//问题是输入的值不会改变,如果它
//当用户选择文件时不显示任何内容
这个. input。父节点。风格。可见性='隐藏';
}
},
enable: function () {
removeClass(this ._button,这个.设置。残疾类);
这个.按钮。删除属性(“disabled”);
这个. disabled=false
},
/**
*创建不可见的文件输入
*将悬停在按钮上方
* divinput type='file' //div
*/
_createInput: function () {
var self=this
var输入=文档。createelement(“input”);
input.setAttribute('type ',' file ');
input.setAttribute('name ',this ._设置。姓名);
添加样式(输入,{
位置':'绝对,
//在歌剧中只有"浏览"按钮
//是可点击的,它位于
//输入的右侧
'右':0,
"边距":0,
'填充':0,
字号':' 480像素,
光标':'指针'
});
var div=文档。createelement(' div ');
addStyles(div,{
显示':'块,
位置':'绝对,
溢出':'隐藏,
"边距":0,
'填充':0,
不透明度':0,
//确保浏览按钮在右侧
//在微软公司出品的web浏览器中
方向:' ltr ',
//Opera 9.0-9.2支持的马克斯津德克斯
' zIndex': 2147483583
});
//确保元素不透明存在。
//否则使用工业管理学(Industrial Engineering)过滤器
if (div.style.opacity!=='0') {
if(的类型(div。过滤器)=='未定义'){
抛出新错误("浏览器不支持不透明度");
}
div.style.filter='alpha(不透明度=0)';
}
addEvent(input,' change ',function () {
如果(!input || input.value==='') {
返回;
}
//从输入中获取文件名,必需
//因为有些浏览器用小路代替它
var file=file from path(输入。值);
if (false===self ._settings.onChange.call(self,file,getExt(file))) {
自我. clear input();
返回;
}
//值更改时提交表单
如果(自我. settings.autoSubmit) {
自我。submit();
}
});
addEvent(input,' mouseover ',function () {
addClass(self ._button,自我.设置。悬停类);
});
addEvent(input,' mouseout ',function () {
removeClass(self ._button,自我.设置。悬停类);
//我们使用可见性而不是显示来解决Safari 4的问题
//问题是输入的值不会改变,如果它
//当用户选择文件时不显示任何内容
输入。父节点。风格。可见性='隐藏';
});
div.appendChild(输入);
文档。身体。appendchild(div);
这个. input=输入;
},
_clearInput: function () {
如果(!这个. input) {
返回;
}
//这个. input。值=" ";在IE6中不工作
removeNode(this ._输入。父节点);
这个. input=null
这个. create input();
removeClass(this ._button,这个.设置。悬停类);
},
/**
*该功能确保当用户点击上传按钮时,
*这个.输入改为被单击
*/
_rerouteClicks: function () {
var self=this
//IE稍后将显示"拒绝访问"错误
//如果使用利用自己._input.click()
//其他浏览器直接忽略单击()
添加事件(自身._button,'鼠标悬停,函数(){
如果(自我. disabled) {
返回;
}
如果(!自我. input) {
自我. create input();
}
var div=self ._ input.parentNode
复制布局(自我._button,div);
div。风格。visibility=' visible
});
//注释,因为我们现在在老鼠离开上隐藏输入
/**
*当调整窗口大小时,元素
*如果按钮位置不同,可能会错位
*关于窗口大小
*/
//addResizeEvent(function(){
//if (self ._input){
//copyLayout(self ._button,自我. input。父节点);
//}
//});
},
/**
*创建具有唯一名称的内联框架
* @return {Element} iframe
*/
_createIframe: function () {
//我们不能使用getTime,因为它有时会返回
旅行队中的相同值:(
var id=getUID();
//我们不能使用下面的代码作为名字属性
d // 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 // 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(); } }; })();
以上就是为大家介绍的ajaxfileupload.js实现上传文件的简单小例子,希望大家喜欢。
相关阅读:
js ajaxfileupload.js上传报错的解决方法
jQuery插件AjaxFileUpload实现ajax文件上传
就为大家分享到这,之后会有更多精彩内容不要错过。
更多精彩内容,请点击《jQuery上传操作汇总》,《ajax上传技术汇总》进行深入学习和研究。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。