项目中用到一个HTML5上传功能,带进度条实现。
进度条需要获取上传中状态,需要布在环境中才能实现。
以下代码开发用的环境为PHP,在JAVA下应该可以直接运行。可以试下,
代码没有多麻烦。
纯属个人记录,请勿喷。
@baukh20140625:优化了验证文件类型。
/* @baukh 上传功能 基于jquery,html5 @baukh20140625:优化了验证文件类型 */ //全局变量 var NOWlOADING, //正在上传的文件进度条区域【file_plan】 XMLHTTP; //XMLHttpRequest实例化对象 var Au_upload = { /* $arg.updataArea :上传区域 $arg.updata_main :上传事件区域 $arg.upFile_hide :上传文件隐藏事件 $arg.upFile_show :上传文件伪事件【模拟生成事件,调用隐藏的功能,用于处理样式问题】 $arg.updata_list :上传文件队例 $arg.upadat_tip :上传提示文字 $arg.file_plan :上传进度条 $arg.file_name :上传文件名 $arg.file_action :上传中或已上传文件的删除操作 $arg.fileClass :允许上传的文件类型 $arg.fileMaxSize :允许上传的文件最大值 $arg.allowVoid :是否允许为空 $arg.updataUrl :文件上传地址 $arg.delFileUrl :删除已上传文件地址 */ init: function(pre){ if(!pre){ var pre = {}; } var arg = { updataArea : pre.updataArea || '.updataArea', updata_main : pre.updata_main || '.updata_main', upFile_hide : pre.upFile_hide || '.upFile_hide', upFile_show : pre.upFile_show || '.upFile_show', updata_list : pre.updata_list || '.updata_list', upadat_tip : pre.upadat_tip || '.upadat_tip', file_plan : pre.file_plan || '.file_plan', file_name : pre.file_name || '.file_name', file_action : pre.file_action || '.file_action', fileClass : pre.fileClass || ['dwg','pdf','doc','docx','ppt','pptx','jpg','png','bmp','gif','rar','zip','giz','txt','et','dps','wps','xls','xlsx','accdb','pub','swf'], fileMaxSize : pre.fileMaxSize || 2 * 1024 * 1024, allowVoid : pre.allowVoid || false, uploadUrl : pre.uploadUrl || APP+'/Custom/addFile', delFileUrl : pre.delFileUrl || APP+'/Custom/delFile', } if(!Au_upload.bind_Source(arg)){ console.log('%cbind_Source:在绑定上传事件时,失败','color:#f00'); } if(!Au_upload.bind_DelFile(arg)){ console.log('%cbind_DelFile:在绑定删除文件事件时,失败','color:#f00'); } } /* @bind_Source:触发源头绑定事件 //视觉展现的是伪上传按钮,真实的上传按纽处于隐藏状态 */ ,bind_Source: function(arg){ var updataArea = $(arg.updataArea); if(!updataArea || updataArea.length == 0){ console.log('未找到有效的上传区域,程序已终止'); return false; } //绑定打开选择文件框 var upFile_show = updataArea.find(arg.upFile_show); upFile_show.die('click'); upFile_show.live('click',function(){ var _this = $(this); var _this_upFile_hide = _this.parent().find(arg.upFile_hide); _this_upFile_hide.click(); }); //绑定文件上传隐藏域的值变更事件 var upFile_hide = updataArea.find(arg.upFile_hide); upFile_hide.die('change'); upFile_hide.live('change',function(){ Au_upload.addFile(arg,$(this)); }); return true; } /* @addFile:增加上传文件 */ ,addFile: function(arg,upFileSource){ var _upFileSource = $(upFileSource); //文件DOM var oFile = upFileSource.get(0).files[0]; //获取文件 var fileName = _upFileSource.val(); //文件名 var fileSplit = fileName.split('.'); //分割文件名,产生数组 var fileType = fileSplit[fileSplit.length - 1]; //文件名后缀 // 对文件类型进行验证【采用后缀而不去使用通过文件获取的type】 if(arg.fileClass.length > 0){ //如果后缀数组为空的时候,将不再进行后缀验证 var TypeIsRight = $.inArray(fileType,arg.fileClass); if(TypeIsRight == -1){ alert('您当前选择的文件类型不允许上传'); return false; } } //文件为空验证,arg.allowVoid配置是否允许上传文件为空 if (!arg.allowVoid && oFile.size == 0) { alert('文件为空,请重新选择'); return false; } // 对文件大小进行验证 if (oFile.size > arg.fileMaxSize) { alert('您当前选择的文件过大'); return false; } var _form = _upFileSource.parents('form'); Au_upload._filePost(arg,_form,oFile); } /* @_filePost:实例化上传 */ ,_filePost: function(arg,f,oFile){ NOWlOADING = $('.newLoading'); if(NOWlOADING.length != 0){ alert('当前已存在一个上传中的文件'); return false; } var _form = $(f); var updata_list = _form.parents(arg.updataArea).find(arg.updata_list).find('ul'); //通过事件源进行反查找,针对于处理单页面中多个上传元素 var tmpHtml = '<li class="newLoading hide">' + '<span class="file_name">' + oFile.name + '</span>' + '<div class="file_plan"><span class="fp_slider" style="width:0%;"></span></div>' + '<span class="file_action cancelFile">取消上传</span>' + '</li>'; updata_list.append(tmpHtml); var siv = window.setInterval(function(){ NOWlOADING = $('.newLoading'); if(NOWlOADING.length > 1){ alert('上传失败,请重试'); return false; } if(NOWlOADING.length == 1){ window.clearInterval(siv); var vFD = new FormData(_form.get(0)); // 创建XMLHttpRequest对象,添加一些事件侦听器,发送数据 XMLHTTP = new XMLHttpRequest(); XMLHTTP.upload.addEventListener('progress', Au_upload._fileProgress, false); XMLHTTP.addEventListener('load', Au_upload._fileLoad, false); XMLHTTP.addEventListener('error', Au_upload._fileError, false); XMLHTTP.addEventListener('abort', Au_upload._fileAbort, false); XMLHTTP.open('POST', arg.uploadUrl); XMLHTTP.send(vFD); var cancelFile = NOWlOADING.find('.'+arg.cancelFile); cancelFile.unbind('click'); cancelFile.click(function(){ XMLHTTP.abort(); }); } },100) } /* @_fileProgress:文件上传中 //如果不在环境中,无法获得此状态 */ ,_fileProgress: function(e){ NOWlOADING = $('.newLoading'); var _slider = NOWlOADING.find('.fp_slider'); /* 该方法存在错误现像,暂时未使用 另在文件上传前已经过验证是否为空, if (!e.lengthComputable) { alert('这是一个空文件,请重新选择'); NOWlOADING.remove(); return false; } */ if(NOWlOADING.hasClass('hide')){ NOWlOADING.fadeIn(500); NOWlOADING.remove('hide'); } iBytesUploaded = e.loaded; iBytesTotal = e.total; var iPercentComplete = Math.round(e.loaded * 100 / e.total); //操作上传进度条 _slider.stop(); _slider.animate({ width:iPercentComplete+'%' },500); var iBytesTransfered = Au_upload.bytesToSize(iBytesUploaded); console.log('上传中..'+iBytesTransfered +'/'+iBytesTotal +'='+iPercentComplete); } /* @bytesToSize:字节转换 */ ,bytesToSize: function (bytes) { var sizes = ['Bytes', 'KB', 'MB']; if (bytes == 0) return 'n/a'; var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))); return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i]; } /* @_fileLoad:文件上传完毕 */ ,_fileLoad: function(e){ if(NOWlOADING.length != 1){ alert('上传文件失败,请重试'); return false; } //上传成功后,清除上传成功的滑动标识 NOWlOADING.removeClass('newLoading'); var _fileAction = NOWlOADING.find('.cancelFile'); _fileAction.removeClass('cancelFile'); //清除取消标识 _fileAction.text('删除'); _fileAction.unbind('click'); _fileAction.addClass('delFile'); //清除删除标识 var json = jQuery.parseJSON(XMLHTTP.responseText); _fileAction.attr('fileId',json.fileId); //文件上传成功后,等待滑动效果完全结束后,隐藏进度条区域 window.setTimeout(function(){ var _filePlan = NOWlOADING.find('.file_plan'); _filePlan.fadeOut(500); },500); console.log('文件上传完毕'); } /* @_fileError:文件上传失败 */ ,_fileError: function(){ if(NOWlOADING.length == 1){ NOWlOADING.removeClass('newLoading'); NOWlOADING.find('.file_plan').addClass('upload_error'); } console.log('上传失败'); } /* @_fileAbort:文件上传中止 */ ,_fileAbort: function(){ if(!NOWlOADING || NOWlOADING.length == 0){ NOWlOADING = $('.newLoading'); } NOWlOADING.removeClass('newLoading'); NOWlOADING.find('.file_plan').addClass('upload_error'); console.log('上传终止'); } /* @cancelFile:取消正在上传文件 */ ,cancelFile: function(XMLHTTP){ alert('已废弃'); //已废弃 } /* @delFile:删除已上传文件 */ ,bind_DelFile: function(arg){ var updataArea = $(arg.updataArea); var delFile = updataArea.find('.delFile'); delFile.die('click'); delFile.live('click',function(){ var _this = $(this); var fileId = _this.attr('fileId'); if(!fileId){ alert('删除失败,请重试'); console.log('删除失败:未找到有效的文件ID'); return false; } var data = { fileId : fileId } $.post(arg.delFileUrl,data,function(m){ if(m.code != '1'){ alert(m.msg); console.log('删除失败:由服务器删除失败引发'); return false; } var onlyFile = _this.parents('li'); //获取当前删除所在的li节点 onlyFile.fadeOut(500,function(){ //在获得服务器响应后,将节点删除 onlyFile.remove(); }) },'JSON'); }); return true; } }
相关推荐
从我的项目中摘出来的,springboot项目,可以拎出来单独运行,全量所有的模块请查看https://gitee.com/zgdong/icustom-boot 如果单独运行请自行修改maven依赖
html版进度条进度条,用于上传文件进度读取
PHP+Html5上传demo带预览、进度条,挺好用的.zip
spring mvc html5带进度条上传的例子,ECLIPSE MAVEN 工程,带前端和后台
HTML5 JS ajax 无刷新上传文件 带进度条 效果不错 自己用的
html文件批量上传并显示进度条,html文件多选上传进度条
文件上传(进度条显示)源码 源码描述: 文件上传功能,带有进度条显示,上传的附件列表用GridView展示 带有附件删除功能
仿uploadify HTML5 jquery多文件上传 进度条,仿照uploadify写的,但是官方的html5版本是要收费的,索性自己动手写,配置参数均与uploadify官网一致,直接把文件夹上传到支持php的服务器即可,上传的文件保存在...
带进度条的HTML5上传文件---(使用XMLHttpRequest对象)
html5和js多文件上传插件。可任意多文件选择上传,每个文件都可以显示进度,同时可以显示整体进度。采用了html的file对象和blob对象的属性和方法。
上传文件时,如果文件较大,估计浏览器会处于一直加载中,如果用户不知道,误点其它操作,有可能造成文件上传失败,这里简单实现提示上传进度. 导入项目,运行http://localhost:8080/canvas/table.jsp 即可看到效果
就近几天由于项目需要制作的FLASH+PHP多文件上传; 废话不多说: 各位复制测试地址去看看就知道了!有说明 测试地址:http://www.bluecube.cn/test/upload.html
本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1. lib.js var Host = [removed].host; //--Cookie function setCookie(name,value) { var Days = 30; var exp =...
通过netty获取文件进度,上传文件的时时数据大小,剩余时间.websocket和HTML结合,并不javascript的轮询获取上传进度,而是通过NIO的推送.
NULL 博文链接:https://xhload3d.iteye.com/blog/2217955
html+servlet 带进度条的文件上传,用swfupload实现,用servlet接收文件,整个工程,完整例子,服务器端可以用其他语言。
俺亲手写的: 1.支持多文件上传 2.带进度条 3.可以显示文件名称 4.可以实时显示已上传的大小 5.可以从队列中删除 6.各元素的样式都可以自己控制
1.struts2 带进度条文件上传 源码 2.源码中有lib 下载后部署马上就能用 3.代码中有详细的注释信息 4.对关键点有详细的解释说明 5.如果谁用起来觉得有问题可在评论留言,留联系方式,我会联系你的 6.非常感谢原创作者...
进度条,文件名称,文件大小,文件上传速度等功能。 经过修改的显示界面大概如下 完成百分比:68% 文件名称:asp_net_progressbar.rar 文件大小:259KB 上传速度:150KB/sec 理论上说不限制上传文件的大小。但...