爱易网
IT新闻
IT新闻
爱易资讯
网站搭建
云虚拟主机教程
云服务器教程
Apache教程
IIS教程
Nginx教程
网站策划
站长文章
推广教程
淘宝客教程
网页设计
HTML教程
XHTML教程
CSS教程
HTML5教程
CSS3教程
JavaSript基础
JQuery教程
Node.js教程
前端技术
Ajax教程
Js特效
Xml教程
平面设计
页面UI设计
photoshop教程
程序开发
AI人工智能
Asp教程
Php教程
Asp.Net教程
Net Core教程
C#教程
Java教程
Jsp教程
开发技术
微信小程序教程
Uniapp开发教程
微信公众号开发
Andriod教程
IOS教程
DOS教程
Python教程
Docker教程
Windows Container教程
数据库
MSSQL教程
MySQL教程
Redis教程
Access教程
Oracle教程
数据库教程
操作系统
Linux教程
Windows教程
MAC教程
Cisco教程
交换机教程
防火墙教程
搜索
爱易网页
ASP教程
AJAX无刷新文件上传示例
AJAX无刷新文件上传示例
日期：2010-02-05 浏览次数：21314 次
以下是HTML网页特效代码，点击运行按钮可查看效果：
以下是程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>仿163网盘无刷新文件上传系统</title> </head> <body> <style> .fu_list { width:600px; background:#ebebeb; font-size:12px; } .fu_list td { padding:5px; line-height:20px; background-color:#fff; } .fu_list table { width:100%; border:1px solid #ebebeb; } .fu_list thead td { background-color:#f4f4f4; } .fu_list b { font-size:14px; } /*file容器样式*/ a.files { width:90px; height:30px; overflow:hidden; display:block; border:1px solid #BEBEBE; background:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/fu_btn.gif) left top no-repeat; text-decoration:none; } a.files:hover { background-color:#FFFFEE; background-position:0 -30px; } /*file设为透明，并覆盖整个触发面*/ a.files input { margin-left:-350px; font-size:30px; cursor:pointer; filter:alpha(opacity=0); opacity:0; } /*取消点击时的虚线框*/ a.files, a.files input { outline:none;/*ff*/ hide-focus:expression(this.hideFocus=true);/*ie*/ } </style> <form id="uploadForm" action="File.ashx"> <table border="0" cellspacing="1" class="fu_list"> <thead> <tr> <td colspan="2"><b>上传文件</b></td> </tr> </thead> <tbody> <tr> <td align="right" width="15%" style="line-height:35px;">添加文件：</td> <td><a href="javascript:void(0);" class="files" id="idFile"></a> <img id="idProcess" style="display:none;" src="http://images.cnblogs.com/cnblogs_com/cloudgamer/loading.gif" /></td> </tr> <tr> <td colspan="2"><table border="0" cellspacing="0"> <thead> <tr> <td>文件路径</td> <td width="100"></td> </tr> </thead> <tbody id="idFileList"> </tbody> </table></td> </tr> <tr> <td colspan="2" style="color:gray">温馨提示：最多可同时上传 <b id="idLimit"></b> 个文件，只允许上传 <b id="idExt"></b> 文件。 </td> </tr> <tr> <td colspan="2" align="center" id="idMsg"><input type="button" value="开始上传" id="idBtnupload" disabled="disabled" /> <input type="button" value="全部取消" id="idBtndel" disabled="disabled" /> </td> </tr> </tbody> </table> </form> <script type="text/javascript"> var isIE = (document.all) ? true : false; var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } var Each = function(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } }; //文件上传类 var FileUpload = Class.create(); FileUpload.prototype = { //表单对象，文件控件存放空间 initialize: function(form, folder, options) { this.Form</div></div> <div class="clearfix"></div> </div> <nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="55257">上一篇：Asp Base64 Unicode编码与解码函数 中文编码使用GB2312方式非UTF-8</a></li> <li class="next"><a href="24004">下一篇：ASP调用带参数的MSSQL存储过程，并返回临时表记录集</a></li> </ul> </nav> <div class="alert alert-warning" role="alert"> <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">相关资料<span><a target="_blank" class="pull-right" href="/asp/">更多></a></span></h3> </div> <div class="panel-body row"> <ol> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/asp/25314' title='推荐：监测你的SQL Server让瓶颈暴露' target="_blank"> 推荐：监测你的SQL Server让瓶颈暴露</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/asp/24000' title='ASP实现一个页面打开两个不同路径的数据库' target="_blank"> ASP实现一个页面打开两个不同路径的数据库</a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/asp/48534' title=' 救一下，代码需求如下 ' target="_blank"> 救一下，代码需求如下 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/asp/48458' title=' JS限制文本框输入类型的有关问题 ' target="_blank"> JS限制文本框输入类型的有关问题 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/asp/54832' title=' 关于一个ASP的小疑点 ' target="_blank"> 关于一个ASP的小疑点 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/asp/50313' title=' dw+vss登陆有关问题 ' target="_blank"> dw+vss登陆有关问题 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/asp/48424' title=' 关于跳转刷新的有关问题，望指教 ' target="_blank"> 关于跳转刷新的有关问题，望指教 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/asp/48294' title=' 程序怎么获取新浪微博的关注、粉丝、博文数量 ' target="_blank"> 程序怎么获取新浪微博的关注、粉丝、博文数量 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/asp/48598' title=' 怎么求本月、上月、去年同期、今年累计（用一条SQL语句） ' target="_blank"> 怎么求本月、上月、去年同期、今年累计（用一条SQL语句） </a></li></div> </ol> </div> </div> </div> <div class="col-lg-4 hidden-sm hidden-xs"> <!--右边的内容--> <a id="AdPageRight1_AdPageRight" href="http://www.tdyun.com/host/?aiyiweb" target="_blank"><img class="img-responsive" src="/images/TdPageAd/host.png" alt="香港全能空间 香港高速云虚拟主机PHP/ASP/NET送MSSQL和MYSQL" /></a> <script src='/Scripts/AdContentPage300_1.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_2.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_3.js' language='javascript'></script> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">推荐阅读<span><a target="_blank" class="pull-right" href="/asp/">更多></a></span></h3> </div> <div class="panel-body"> <ol> <li class="articleAbout"><a href=/asp/48023 title=' asp无刷新签到,该如何处理 ' target="_blank"> asp无刷新签到,该如何处理 </a></li> <li class="articleAbout"><a href=/asp/25492 title='第十篇 Global.asa文件的使用及Chat程序' target="_blank"> 第十篇 Global.asa文件的使用及Chat程序</a></li> <li class="articleAbout"><a href=/asp/29793 title='检查sql字符串中是否有单引号，有则进行转化' target="_blank"> 检查sql字符串中是否有单引号，有则进行转化</a></li> <li class="articleAbout"><a href=/asp/48960 title=' asp连接 excel读取出来的数据为空 小弟我从网上DOWN了很多代码，总是不对，请高手相助！ ' target="_blank"> asp连接 excel读取出来的数据为空 小弟我从网上DOWN了很多代码，总是不对，请高手相助！ </a></li> <li class="articleAbout"><a href=/asp/49203 title=' IIS和AspWebServer有关问题 ' target="_blank"> IIS和AspWebServer有关问题 </a></li> <li class="articleAbout"><a href=/asp/23789 title='asp也来玩三层?' target="_blank"> asp也来玩三层?</a></li> <li class="articleAbout"><a href=/asp/44339 title=' 小弟我的站是asp开发的，怎么在页面加一个Twitter 一键分享 ' target="_blank"> 小弟我的站是asp开发的，怎么在页面加一个Twitter 一键分享 </a></li> <li class="articleAbout"><a href=/asp/49484 title=' 请谁帮哈忙 (0x80040E14)INSERT INTO 语句的语法异常 ' target="_blank"> 请谁帮哈忙 (0x80040E14)INSERT INTO 语句的语法异常 </a></li> <li class="articleAbout"><a href=/asp/54222 title=' 截取字符初学者有关问题~ ' target="_blank"> 截取字符初学者有关问题~ </a></li> <li class="articleAbout"><a href=/asp/51254 title=' 查询语句的疑问,该怎么解决 ' target="_blank"> 查询语句的疑问,该怎么解决 </a></li> <li class="articleAbout"><a href=/asp/29041 title='通过ASP在Flash中妙用Cookie' target="_blank"> 通过ASP在Flash中妙用Cookie</a></li> <li class="articleAbout"><a href=/asp/53944 title=' 图片轮显有关问题 ' target="_blank"> 图片轮显有关问题 </a></li> <li class="articleAbout"><a href=/asp/30912 title='一个取图片尺寸的类，支持jpg,gif,png' target="_blank"> 一个取图片尺寸的类，支持jpg,gif,png</a></li> <li class="articleAbout"><a href=/asp/50079 title=' 输出九九乘法表的函数 ' target="_blank"> 输出九九乘法表的函数 </a></li> <li class="articleAbout"><a href=/asp/54762 title=' 新手提问解决方法 ' target="_blank"> 新手提问解决方法 </a></li> <li class="articleAbout"><a href=/asp/49760 title=' 怎样用户按下F5之后，以对话框提示用户是否刷新，用户点击“否”则不刷新？解决思路 ' target="_blank"> 怎样用户按下F5之后，以对话框提示用户是否刷新，用户点击“否”则不刷新？解决思路 </a></li> <li class="articleAbout"><a href=/asp/53159 title=' 请教asp中的function过程的有关问题 ' target="_blank"> 请教asp中的function过程的有关问题 </a></li> <li class="articleAbout"><a href=/asp/23948 title='将阿拉伯数字转换成汉字数字的函数' target="_blank"> 将阿拉伯数字转换成汉字数字的函数</a></li> <li class="articleAbout"><a href=/asp/44074 title=' 一个诡谲的情况，实再是搞不懂了 ' target="_blank"> 一个诡谲的情况，实再是搞不懂了 </a></li> <li class="articleAbout"><a href=/asp/45604 title=' 多个字段的求和有关问题 ' target="_blank"> 多个字段的求和有关问题 </a></li> </ol> </div> </div> </div> </div> <div class="clearfix"></div> <footer class=" footer navbar-bottom"> <em>友情链接：</em> <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a> <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a> <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a> <br /> <script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script> Copyright © 2013-2026 爱易网页 当前在线：536人 网站在4时19分3秒内访问总人数：28809人 当前 33.41% <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script> </footer> </div> </body> </html>
以下是程序代码 以下是程序代码 以下是程序代码