Michaelwubo
Michaelwubo

HTML5 jQuery+FormData 异步上传文件，带进度条

利用jQuery和html5的FormData异步上传文件的好处是：

  • 实现很简单
  • 很方便地支持进度条
  • 很方便地进行扩展和美化

先看看效果图：

HTML5 jQuery+FormData 异步上传文件，带进度条_第1张图片

图片上传后的结果：

HTML5 jQuery+FormData 异步上传文件，带进度条_第2张图片


实现步骤如下：

第一步：配置好SpringMVC + servlet3.0 文件上传所需要的各种资源，参考：http://blog.csdn.net/clementad/article/details/49533189


第二步：上传页面的html代码：

[html] view plain copy print ?
  1. >
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link href="../resources/css/common.css" rel="stylesheet" />
  6. <script src="../resources/js/jquery-2.1.4.js">script>
  8. head>
  10. <body>
  11. <h2>HTML5异步上传文件，带进度条h2>
  12. <form method="post" enctype="multipart/form-data">
  13. 其他需要提交的信息：<input type="text" name="otherInfo"/><br/><br/>
  14. 选择要上传的文件：<br/>
  15. <input type="file" name="file" /><span>span><br/>
  16. <input type="file" name="file" /><span>span><br/>
  17. form>
  19. <br/><br/>
  20. <input type="button" value="上传吧" onclick="upload()"/>
  21. <br/><br/>
  22. 上传进度：<progress>progress><br/>
  23. <p id="progress">0 bytesp>
  24. <p id="info">p>
  25. body>
  26. html> 



	
	
	
	



	
HTML5异步上传文件，带进度条

	

		其他需要提交的信息：


		选择要上传的文件：

		

		

	

	
	


	
	


	上传进度：

	
0 bytes


第三步：异步上传的JavaScript代码（注释很详细）：

[javascript] view plain copy print ?

第四步：SpringMVC写好接受和保持文件的Controller方法：

[java] view plain copy print ?
  1. /**
  2. * 文件上传
  3. * @author XuJijun
  4. *
  5. */
  6. @RestController
  7. @RequestMapping("/servlet/file")
  8. public class FileUploadController {
  10. /**
  11. * 保存文件的目录，放在web目录、或一个指定的绝对目录下
  12. */
  13. private static final String SAVE_DIR = "uploadFiles";
  15. /**
  16. *
  17. * @param request
  18. * @param response
  19. * @param p form表单中，type="text"的input控件，内容通过这个参数传送过来，以input控件中的name属性来区分
  20. * @return JSON表示的处理结果
  21. * @throws ServletException
  22. * @throws IOException
  23. */
  24. @RequestMapping("/upload")
  25. public JsonResult upload(HttpServletRequest request, HttpServletResponse response, @RequestParam Map p)
  26. throws ServletException, IOException {
  28. // 获取 web application的绝对路径
  29. String appPath = request.getServletContext().getRealPath("");
  31. // 构造文件存放的路径
  32. String savePath = appPath + File.separator + SAVE_DIR;
  34. // 如果文件存放路径不存在，则mkdir一个
  35. File fileSaveDir = new File(savePath);
  36. if (!fileSaveDir.exists()) {
  37. fileSaveDir.mkdirs();
  38. }
  40. List fileNames = new ArrayList<>();
  42. //循环所有的part，把part中的文件保存到硬盘中
  43. for (Part part : request.getParts()) {
  44. String fileName = part.getSubmittedFileName();
  46. //form表单中的每个input，都在一个不同的part中，
  47. //所以需要判断通过fileName是否为空，过滤掉其他类型的input（比如type="text"）：
  48. if(!StringUtils.isEmpty(fileName)){
  49. part.write(savePath + File.separator + fileName);
  50. fileNames.add(fileName);
  51. }
  52. }
  54. Map resultData = new HashMap<>();
  55. resultData.put("savePath", savePath);
  56. resultData.put("files", fileNames);
  58. return new JsonResult("200", "文件上传成功！", resultData);
  59. }
  61. /**
  62. * 从content-disposition头中获取源文件名
  63. *
  64. * content-disposition头的格式如下：
  65. * form-data; name="dataFile"; filename="PHOTO.JPG"
  66. *
  67. * @param part
  68. * @return
  69. */
  70. @SuppressWarnings("unused")
  71. private String extractFileName(Part part) {
  72. String contentDisp = part.getHeader("content-disposition");
  73. String[] items = contentDisp.split(";");
  74. for (String s : items) {
  75. if (s.trim().startsWith("filename")) {
  76. return s.substring(s.indexOf("=") + 2, s.length()-1);
  77. }
  78. }
  79. return "";
  80. }
  82. } 
/**
 * 文件上传
 * @author XuJijun
 *
 */
@RestController
@RequestMapping("/servlet/file")
public class FileUploadController {
	
	/**
	 * 保存文件的目录，放在web目录、或一个指定的绝对目录下
	 */
	 private static final String SAVE_DIR = "uploadFiles";
	
	 /**
	  * 
	  * @param request
	  * @param response
	  * @param p form表单中，type="text"的input控件，内容通过这个参数传送过来，以input控件中的name属性来区分
	  * @return JSON表示的处理结果
	  * @throws ServletException
	  * @throws IOException
	  */
	@RequestMapping("/upload")
	public JsonResult upload(HttpServletRequest request, HttpServletResponse response, @RequestParam Map p)
			throws ServletException, IOException {

		// 获取 web application的绝对路径
		String appPath = request.getServletContext().getRealPath("");
		
		// 构造文件存放的路径
		String savePath = appPath + File.separator + SAVE_DIR;

		// 如果文件存放路径不存在，则mkdir一个
		File fileSaveDir = new File(savePath);
		if (!fileSaveDir.exists()) {
			fileSaveDir.mkdirs();
		}

		List fileNames = new ArrayList<>();
		
		//循环所有的part，把part中的文件保存到硬盘中
		for (Part part : request.getParts()) {
			String fileName = part.getSubmittedFileName();
			
			//form表单中的每个input，都在一个不同的part中，
			//所以需要判断通过fileName是否为空，过滤掉其他类型的input（比如type="text"）：
			if(!StringUtils.isEmpty(fileName)){ 
				part.write(savePath + File.separator + fileName);
				fileNames.add(fileName);
			}
		}

		Map resultData = new HashMap<>();
		resultData.put("savePath", savePath);
		resultData.put("files", fileNames);
		
		return new JsonResult("200", "文件上传成功！", resultData);
	}
	 
	/**
	 * 从content-disposition头中获取源文件名
	 * 
	 * content-disposition头的格式如下：
	 * form-data; name="dataFile"; filename="PHOTO.JPG"
	 * 
	 * @param part
	 * @return
	 */
	@SuppressWarnings("unused")
	private String extractFileName(Part part) {
	    String contentDisp = part.getHeader("content-disposition");
	    String[] items = contentDisp.split(";");
	    for (String s : items) {
	        if (s.trim().startsWith("filename")) {
	            return s.substring(s.indexOf("=") + 2, s.length()-1);
	        }
	    }
	    return "";
	}

}

最后那个私有方法可以不用的，只是为了演示如何直接获取request header中的数据。


最后，验证上传过程中的网络消息：

上传的消息头和数据：

HTML5 jQuery+FormData 异步上传文件，带进度条_第3张图片
可见，对于表单中的3个input，http request payload中对应有3个part来上传数据。

关于http协议的更多介绍，可参考：http://blog.csdn.net/clementad/article/details/41620765


Controller处理后的返回结果（JSON格式）：

HTML5 jQuery+FormData 异步上传文件，带进度条_第4张图片

总结：代码很简单，结果很友好。感谢HTML5和SpringMVC！


你可能感兴趣的:(HTML5 jQuery+FormData 异步上传文件，带进度条)

  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类qt开发语言sdl2linux
    需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 被带偏的家人，可气又感动 艾孤璟
    当我还是个严肃且内敛的孩子时，爷爷也是个严谨且和蔼的人，虽然不苟言笑，但没有距离感。当我接触的人越来越多，知道怎么调动气氛，家人们就被我带偏了。家里人本来没有外号的，后来都被我给取了各种各样的名字，“骂人”时就相对应的有了暗号。村里的小孩，本来不知道怎么使用假动作“打人”，怎么给人取合适的外号，后来也被我带偏了。老人常说我，古灵精怪，好的不学非得学坏的，带着不良风气。而我对他的话总是想生气又觉得搞
  • 直返APP是什么?直返APP是干嘛的 氧惠帮朋友一起省
    直返是一种电商购物模式，其核心特点是用户购买商品后可以获得直接返利。具体来说，用户在直返电商平台购买商品时，不仅可以获得商品本身的优惠，还可以获得一定的现金返利或者积分奖励。返利的金额可以提现到用户的账户余额，或者用于下次购物时抵扣。氧惠APP（带货领导者）——是与以往完全不同的抖客+淘客app！2023全新模式，我的直推也会放到你下面。主打：带货高补贴，深受各位带货团队长喜爱（每天出单带货几十万
  • 直返的东西正品吗?直返APP安全吗?直返是正规平台吗? 氧惠购物达人
    亲们，你们是不是经常在直返APP上买东西呀？但是，你们有没有想过，里面的东西到底是不是正品呢？这个APP安全吗？它是不是一个正规的平台呀？别着急，今天我就来给大家揭秘一下！氧惠APP（带货领导者）——是与以往完全不同的抖客+淘客app！2023全新模式，我的直推也会放到你下面。主打：带货高补贴，深受各位带货团队长喜爱（每天出单带货几十万单）。注册即可享受高补贴+0撸+捡漏等带货新体验。送万元推广大
  • 第一四三章：天降奇兵 逸川
    “是她！”为了护住公孙枝，季姜（姜姓吕氏女，名子芸）舍身朝着刺来的长戟迎了过去。待公孙枝反应过来，长戟的尖刃已经抵到了季姜的胸前，让他只感手足无措。然就在这千钧一发之际，有一支羽箭突然从山巅飞来直插入狄兵脖颈，将其连人带戟射倒在地。顺着羽箭飞来的方向望去，却见到一名头戴白色纱笠的女子，正站在山脊上左右开弓。每有羽箭射出，便立时有狄兵应声而倒，端是飒爽无比：“竟不知她技艺如此娴熟！”“她是谁？”听到
  • ios GCD _Waiting_
    1.GCD任务和队列学习GCD之前，先来了解GCD中两个核心概念：任务和队列。任务：就是执行操作的意思，换句话说就是你在线程中执行的那段代码。在GCD中是放在block中的。执行任务有两种方式：同步执行（sync）和异步执行（async）。两者的主要区别是：是否等待队列的任务执行结束，以及是否具备开启新线程的能力。同步执行（sync）：同步添加任务到指定的队列中，在添加的任务执行结束之前，会一直等
  • 《吹牛大王历险记》读书随笔 赵炳森
    这本书的作者是埃·拉斯伯戈·毕尔格。（没查到相关内容，好像他只写过《吹牛大王历险记》。）最让人百思不得其解的是他居然能自己拉自己的辫子出泥潭？！我觉得自己拉自己的辫子只会把自己的辫子拉断，而不会飞出泥潭。（问:图片中底下的屁股为什么插了一根钢针？）屁股底下居然有根钢针？在泥潭应该是滑滑的吧，可是他怎么能夹紧马肚呢？马肚子应该是在马的下方。还有如果能从泥潭里把连人带马都给拽出来的话，他力气肯定很大，
  • 京券东券优惠券领取网站-点击进入 高省爱氧惠
    嘿，小伙伴们，你们知道吗？京东商城可是有好多超值优惠券等着我们领取哦！不论是京券还是东券，都有好多好多的优惠等着我们呢！氧惠APP（带货领导者）——是与以往完全不同的抖客+淘客app！2024全新模式，我的直推也会放到你下面。主打：带货高补贴，深受各位带货团队长喜爱（每天出单带货几十万单）。注册即可享受高补贴+0撸+捡漏等带货新体验。送万元推广大礼包，教你如何1年做到百万团队。想要领取这些优惠券，
  • 《靡色知音》 这个人叫安安
    图片发自App他俯下身来的时候乔伊不是没有心猿意马，但是只一瞬，她又巧妙的偏了一下头。她转身欲走，他倒好，一把扯着她的手，顺势往他怀里一带。乔伊没防备的由惯性硬生生撞进他怀里，贴上一块不可撼动的肉墙。她还没有吃疼的喊出声音来，他就把她翻过身去，像警察一样把她反扣在墙壁。她被他扣的死死地，对方一脸玩味和挑衅。乔伊冷冷的说：“放开。”那人也没应声，扬了扬眉毛，把她往墙壁那里一推，加重了力道。乔伊最好和
  • ❤学习《家庭教育指导师》第三天分享❤ 温暖富足女神
    时光飞逝，转眼来到了第3天的学习，今天上午的领导讲话与故事分享时间虽然有点长，但却带给大家很大的启发：亲人的离世，让我们更加珍惜身边的眼前人;导师们的心历路程让我们感动、敬佩与深受启发！每个人的生命都是独一无二的，每个人的生命都那么的珍贵与精彩！每个人的生命又那么的不容易与耐抗挫折！每个人来到这个人世间，都会有它的使命感，当强大的内心力量被唤醒时，他将无所不能！慧萍老师带我们体验的“一分钟击掌”与
  • 06选课支付模块之基于消息队列发送支付通知消息 echo 云清 学成在线javarabbitmq消息队列支付通知学成在线
    消息队列发送支付通知消息需求分析订单服务作为通用服务，在订单支付成功后需要将支付结果异步通知给其他对接的微服务，微服务收到支付结果根据订单的类型去更新自己的业务数据技术方案使用消息队列进行异步通知需要保证消息的可靠性即生产端将消息成功通知到服务端：消息发送到交换机-->由交换机发送到队列-->消费者监听队列，收到消息进行处理，参考文章02-使用Docker安装RabbitMQ-CSDN博客生产者确
  • 微信母婴闲置群如何盈利赚钱 母婴优惠券群主怎么做 古楼
    宝妈闲置群群主怎么赚钱微信母婴闲置群如何盈利赚钱怎么做母婴优惠券群作为宝妈闲置群群主，你可以通过以下几种方式赚取收益：1.分享优惠券和佣金实现带货赚钱：宝妈闲置群群主带货赚钱最常见的方式就是直接做母婴优惠群群分享商品赚钱。母婴闲置群群主通过对接高省优惠券返利app这类第三方平台分享优惠券获得推广购物返利佣金赚钱。高省，含有自动云发单功能，开通云发单，宝妈闲置群群主就可以解放双手，自动分享商品优惠券
  • “元宇宙”带不动Meta？基本业务已“后院起火”！小扎举步维艰！ 链科天下
    由于宏观经济疲软、市场动荡，“放缓”已经成为美国科技股的主线逻辑，曾风光无限的科技巨头Meta也开始一路下行、举步维艰。据彭博社报道，Meta已宣布计划裁员并重组团队以削减预算，这是该公司2004年成立以来首次大幅削减预算。此次裁员或受到业绩低迷的影响，Q2财报显示Meta业绩远不及预期，上市以来营收同比出现首次下滑，净利连续三季度下降。扎克伯格表示，“希望经济能够稳定下来，但从目前的情况来看并非
  • 终于可以出去玩了 开心外婆
    今天终于可以带宝宝下去玩了，吃过早饭就准备出门。首先把口罩带好，虽然现在疫情差不多结束了吧，但防护措施还是要做好，宝宝两个多月没出门，好久没带口罩刚带上有点不舒服，总是用手去拿，然后告诉他一定要带好口罩，要不然就不能出去，可能宝宝很想出去，后来就没有摘口罩了。出去也不敢乱走，就在小区广场上玩他的踏板车，玩了两圈就有一个大白经过广场并告诉我马上旁边楼栋要做核酸，要我们先回家去，就这样结束了上午的活动
  • 日记 2019年10月15日 杨义博 c487bb976552
    今天是我穿校服的第一天，我很激动，我觉得我正式成为了一名一年级的小学生。中午回家时，我们看向操场发现有些高年级的大哥哥们在一个一个摆这一个有很多种颜色的龙，我们觉得很酷。下午上体育课，体育老师带我们上操场上去跑了一圈，我们看见了高年级哥哥姐姐们在操场上打鼓，还有一个大哥哥从前面拿着一个戴着星星的拐杖，指挥着全队的行动，最后面还有拿着花圈的，还有拿着国旗的。
  • 日更第120天-顺其自然，为所当为 飞翔001
    在教培业务萎缩之后，新东方前不久宣布转型带货，初期人气寥寥，直播间也就几千人观看，近日，新东方的“东方甄选”因英语老师双语直播带货爆火，直播间人数过万，6月10日，新东方在线股价暴涨近40%，单日成交额突破1000万元，累计近400万人观看了直播。当晚俞敏洪来到直播间，和老师们一起直播带货。俞敏洪称，这是新东方老师们非常关键的转型，他们老师转型做带货主播，受到了大家的关注和部分的肯定，感谢各位网友
  • windows下python opencv ffmpeg读取摄像头实现rtsp推流 拉流 图像处理大大大大大牛啊 opencv实战代码讲解视觉图像项目windowspythonopencv
    windows下pythonopencvffmpeg读取摄像头实现rtsp推流拉流整体流程1.下载所需文件1.1下载rtsp推流服务器1.2下载ffmpeg2.开启RTSP服务器3.opencv读取摄像头并调用ffmpeg进行推流4.opencv进行拉流5.opencv异步拉流整体流程1.下载所需文件1.1下载rtsp推流服务器下载RTSP服务器下载页面https://github.com/blu
  • AI论文写作推荐哪个好？分享5款AI论文写作带数据图表网站 小猪包333 写论文人工智能深度学习计算机视觉
    在当今学术研究和写作领域，AI论文写作工具的出现极大地提高了写作效率和质量。这些工具不仅能够帮助研究人员快速生成论文草稿，还能进行内容优化、查重和排版等操作。以下是五款推荐的AI论文写作工具，包括千笔-AIPassPaper。千笔-AIPassPaper千笔-AIPassPaper是一款功能强大的AI论文写作助手，旨在帮助用户快速生成高质量的论文内容。AI论文，免费大纲，10分钟3万字https:
  • 【Java】已解决：java.util.concurrent.CompletionException 屿小夏 java开发语言
    文章目录一、分析问题背景出现问题的场景代码片段二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项已解决：java.util.concurrent.CompletionException一、分析问题背景在Java并发编程中，java.util.concurrent.CompletionException是一种常见的运行时异常，通常在使用CompletableFuture进行异步计算时出现
  • 7月结束了 摸不着的小鱼
    这日子快得让人看不见、摸不着，也是真的太快了点吧！一眨眼我已经辞去第二份工作两个多月了！在这两个月里真的是做了好多好多事，有自己小试牛刀的“创业”，也有辛酸在家带娃的三个周……时间带不走的永远看不见，时间能带走的都是我们所见所闻的东西……前一个月感觉都是在荒废时间吧，也没有找到自己的定位，一次又一次的更替和改变，我越发觉得自己不清楚自己所要的东西是什么了？后面一个多月的时间里就是磨练耐心了，全程带
  • 封侯非吾意但愿海波平 修源正本
    《韬钤深处》明·戚继光小筑暂高枕，忧时旧有盟。呼樽来揖客，挥麈坐谈兵。云护牙签满，星含宝剑横。封侯非我意，但愿海波平。嘉靖二十五年（1546年），戚继光负责管理登州卫所的屯田事务，当时山东沿海一带，遭受到倭寇的烧杀抢掠，戚继光有心杀贼，于是在一本兵书的空白处，写下了“封侯非我意，但愿海波平”的诗句。“养心莫若寡欲，至乐无如读书”是戚继光又一句名言。从这句话中可以得知戚继光对读书做学问的真知灼见。戚
  • 外卖优惠券公众号哪个好?外卖领券公众号 高省爱氧惠
    随着外卖行业的不断发展壮大，越来越多的外卖平台开始推出各种优惠券活动，吸引用户下单。而在这些外卖优惠券公众号中，我最常用的就是【氧惠】了？不知道大家都在用什么。氧惠APP（带货领导者）——是与以往完全不同的抖客+淘客app！2023全新模式，我的直推也会放到你下面。主打：带货高补贴，深受各位带货团队长喜爱（每天出单带货几十万单）。注册即可享受高补贴+0撸+捡漏等带货新体验。送万元推广大礼包，教你如
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • 何为为人师表！ 雍罡
    好长一段时间，跟几个同事交往的过程中发现，有的班级学生特别有礼貌，在校园还是校外，在课堂还是课外，在孩子们身上都表现出良好的文明礼貌，但是有些班级的学生却没大没小，以自我为中心，特意研究了一下这些班级的班主任，发现平时有礼貌的班主任带的班级学生都很有礼貌，没礼貌的孩子的班主任也是没大没小没礼貌。所以班主任自己的德行是很重要的。图片发自App作为老师，所有的工作都是为了落实“立德树人”的根本任务。顾
  • java工厂模式 3213213333332132 java抽象工厂
    工厂模式有 1、工厂方法 2、抽象工厂方法。 下面我的实现是抽象工厂方法, 给所有具体的产品类定一个通用的接口。 package 工厂模式; /** * 航天飞行接口 * * @Description * @author FuJianyong * 2015-7-14下午02:42:05 */ public interface SpaceF
  • nginx频率限制+python测试 ronin47 nginx 频率 python
           部分内容参考：http://www.abc3210.com/2013/web_04/82.shtml 首先说一下遇到这个问题是因为网站被攻击，阿里云报警，想到要限制一下访问频率，而不是限制ip（限制ip的方案稍后给出）。nginx连接资源被吃空返回状态码是502，添加本方案限制后返回599，与正常状态码区别开。步骤如下：
  • java线程和线程池的使用 dyy_gusi ThreadPoolthreadRunnabletimer
    java线程和线程池 一、创建多线程的方式     java多线程很常见，如何使用多线程，如何创建线程，java中有两种方式，第一种是让自己的类实现Runnable接口，第二种是让自己的类继承Thread类。其实Thread类自己也是实现了Runnable接口。具体使用实例如下： 1、通过实现Runnable接口方式 1 2
  • Linux 171815164 linux
    ubuntu kernel http://kernel.ubuntu.com/~kernel-ppa/mainline/v4.1.2-unstable/ 安卓sdk代理 mirrors.neusoft.edu.cn        80 输入法和jdk sudo apt-get install fcitx su
  • Tomcat JDBC Connection Pool g21121 Connection
           Tomcat7 抛弃了以往的DBCP 采用了新的Tomcat Jdbc Pool 作为数据库连接组件，事实上DBCP已经被Hibernate 所抛弃，因为他存在很多问题，诸如：更新缓慢，bug较多，编译问题，代码复杂等等。        Tomcat Jdbc P
  • 敲代码的一点想法 永夜-极光 java随笔感想
                  入门学习java编程已经半年了,一路敲代码下来,现在也才1w+行代码量,也就菜鸟水准吧,但是在整个学习过程中,我一直在想,为什么很多培训老师,网上的文章都是要我们背一些代码?比如学习Arraylist的时候,教师就让我们先参考源代码写一遍,然
  • jvm指令集 程序员是怎么炼成的 jvm 指令集
    转自：http://blog.csdn.net/hudashi/article/details/7062675#comments       将值推送至栈顶时 const ldc  push   load指令 const系列 该系列命令主要负责把简单的数值类型送到栈顶。(从常量池或者局部变量push到栈顶时均使用) 0x02 &nbs
  • Oracle字符集的查看查询和Oracle字符集的设置修改 aijuans oracle
    本文主要讨论以下几个部分：如何查看查询oracle字符集、 修改设置字符集以及常见的oracle utf8字符集和oracle exp 字符集问题。 一、什么是Oracle字符集 Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系。ORACLE 支持国家语言的体系结构允许你使用本地化语言来存储，处理，检索数据。它使数据库工具，错误消息，排序次序，日期，时间，货
  • png在Ie6下透明度处理方法 antonyup_2006 css浏览器FirebugIE
    由于之前到深圳现场支撑上线，当时为了解决个控件下载，我机器上的IE8老报个错，不得以把ie8卸载掉，换个Ie6,问题解决了，今天出差回来，用ie6登入另一个正在开发的系统，遇到了Png图片的问题，当然升级到ie8(ie8自带的开发人员工具调试前端页面JS之类的还是比较方便的，和FireBug一样，呵呵)，这个问题就解决了，但稍微做了下这个问题的处理。 我们知道PNG是图像文件存储格式，查询资
  • 表查询常用命令高级查询方法(二) 百合不是茶 oracle分页查询分组查询联合查询
    ----------------------------------------------------分组查询 group by    having   --平均工资和最高工资   select avg(sal)平均工资,max(sal)  from emp ;  --每个部门的平均工资和最高工资
  • uploadify3.1版本参数使用详解 bijian1013 JavaScriptuploadify3.1
    使用：     绑定的界面元素<input id='gallery'type='file'/>$("#gallery").uploadify({设置参数，参数如下}); 设置的属性： id: jQuery(this).attr('id'),//绑定的input的ID langFile: 'http://ww
  • 精通Oracle10编程SQL(17)使用ORACLE系统包 bijian1013 oracle数据库plsql
    /* *使用ORACLE系统包 */ --1.DBMS_OUTPUT --ENABLE:用于激活过程PUT,PUT_LINE,NEW_LINE,GET_LINE和GET_LINES的调用 --语法：DBMS_OUTPUT.enable(buffer_size in integer default 20000); --DISABLE:用于禁止对过程PUT,PUT_LINE,NEW
  • 【JVM一】JVM垃圾回收日志 bit1129 垃圾回收
    将JVM垃圾回收的日志记录下来，对于分析垃圾回收的运行状态，进而调整内存分配(年轻代，老年代，永久代的内存分配)等是很有意义的。JVM与垃圾回收日志相关的参数包括： -XX:+PrintGC -XX:+PrintGCDetails -XX:+PrintGCTimeStamps -XX:+PrintGCDateStamps -Xloggc -XX:+PrintGC 通
  • Toast使用 白糖_ toast
    Android中的Toast是一种简易的消息提示框，toast提示框不能被用户点击，toast会根据用户设置的显示时间后自动消失。     创建Toast 两个方法创建Toast makeText(Context context, int resId, int duration)     参数：context是toast显示在
  • angular.identity boyitech AngularJSAngularJS API
    angular.identiy 描述: 返回它第一参数的函数. 此函数多用于函数是编程. 使用方法: angular.identity(value); 参数详解: Param Type Details value * to be returned. 返回值: 传入的value 实例代码: <!DOCTYPE HTML>
  • java-两整数相除，求循环节 bylijinnan java
    import java.util.ArrayList; import java.util.List; public class CircleDigitsInDivision { /** * 题目：求循环节，若整除则返回NULL，否则返回char*指向循环节。先写思路。函数原型：char*get_circle_digits(unsigned k,unsigned j)
  • Java 日期 周 年 Chen.H javaC++cC#
    /** * java日期操作(月末、周末等的日期操作) * * @author * */ public class DateUtil { /** */ /** * 取得某天相加(减)後的那一天 * * @param date * @param num *
  • [高考与专业]欢迎广大高中毕业生加入自动控制与计算机应用专业 comsci 计算机
          不知道现在的高校还设置这个宽口径专业没有,自动控制与计算机应用专业,我就是这个专业毕业的,这个专业的课程非常多,既要学习自动控制方面的课程,也要学习计算机专业的课程,对数学也要求比较高.....如果有这个专业,欢迎大家报考...毕业出来之后,就业的途径非常广.....      以后
  • 分层查询（Hierarchical Queries） daizj oracle递归查询层次查询
    Hierarchical Queries If a table contains hierarchical data, then you can select rows in a hierarchical order using the hierarchical query clause: hierarchical_query_clause::= start with condi
  • 数据迁移 daysinsun 数据迁移
    最近公司在重构一个医疗系统，原来的系统是两个.Net系统，现需要重构到java中。数据库分别为SQL Server和Mysql，现需要将数据库统一为Hana数据库，发现了几个问题，但最后通过努力都解决了。 1、原本通过Hana的数据迁移工具把数据是可以迁移过去的，在MySQl里面的字段为TEXT类型的到Hana里面就存储不了了，最后不得不更改为clob。 2、在数据插入的时候有些字段特别长
  • C语言学习二进制的表示示例 dcj3sjt126com cbasic
    进制的表示示例 # include <stdio.h> int main(void) { int i = 0x32C; printf("i = %d\n", i); /* printf的用法 %d表示以十进制输出 %x或%X表示以十六进制的输出 %o表示以八进制输出 */ return 0; }
  • NsTimer 和 UITableViewCell 之间的控制 dcj3sjt126com ios
    情况是这样的: 一个UITableView, 每个Cell的内容是我自定义的 viewA viewA上面有很多的动画, 我需要添加NSTimer来做动画, 由于TableView的复用机制, 我添加的动画会不断开启, 没有停止, 动画会执行越来越多.   解决办法: 在配置cell的时候开始动画, 然后在cell结束显示的时候停止动画   查找cell结束显示的代理
  • MySql中case when then 的使用 fanxiaolong casewhenthenend
    select "主键", "项目编号", "项目名称","项目创建时间", "项目状态","部门名称","创建人" union (select pp.id as "主键", pp.project_number as &
  • Ehcache（01）——简介、基本操作 234390216 cacheehcache简介CacheManagercrud
    Ehcache简介 目录 1       CacheManager 1.1      构造方法构建 1.2      静态方法构建 2       Cache 2.1&
  • 最容易懂的javascript闭包学习入门 jackyrong JavaScript
    http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 下面就是我的学习笔记，对于Javascript初学者应该是很有用的。 一、变量的作用域 要理解闭包，首先必须理解Javascript特殊
  • 提升网站转化率的四步优化方案 php教程分享 数据结构PHP数据挖掘Google活动
    网站开发完成后,我们在进行网站优化最关键的问题就是如何提高整体的转化率，这也是营销策略里最最重要的方面之一，并且也是网站综合运营实例的结果。文中分享了四大优化策略：调查、研究、优化、评估，这四大策略可以很好地帮助用户设计出高效的优化方案。 PHP开发的网站优化一个网站最关键和棘手的是，如何提高整体的转化率，这是任何营销策略里最重要的方面之一，而提升网站转化率是网站综合运营实力的结果。今天，我就分
  • web开发里什么是HTML5的WebSocket？ naruto1990 Webhtml5浏览器socket
    当前火起来的HTML5语言里面，很多学者们都还没有完全了解这语言的效果情况，我最喜欢的Web开发技术就是正迅速变得流行的 WebSocket API。WebSocket 提供了一个受欢迎的技术，以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法，从客户端使用简单的语法有效地推动消息到服务器。让我们看一看6个HTML5教程介绍里 的 WebSocket API：它可用于客户端、服
  • Socket初步编程——简单实现群聊 Everyday都不同 socket网络编程初步认识
    初次接触到socket网络编程，也参考了网络上众前辈的文章。尝试自己也写了一下，记录下过程吧：   服务端：（接收客户端消息并把它们打印出来）   public class SocketServer { private List<Socket> socketList = new ArrayList<Socket>(); public s
  • 面试：Hashtable与HashMap的区别（结合线程） toknowme
    昨天去了某钱公司面试，面试过程中被问道 Hashtable与HashMap的区别？当时就是回答了一点，Hashtable是线程安全的，HashMap是线程不安全的，说白了，就是Hashtable是的同步的，HashMap不是同步的，需要额外的处理一下。   今天就动手写了一个例子，直接看代码吧 package com.learn.lesson001; import java
  • MVC设计模式的总结 xp9802 设计模式mvc框架IOC
    随着Web应用的商业逻辑包含逐渐复杂的公式分析计算、决策支持等，使客户机越 来越不堪重负，因此将系统的商业分离出来。单独形成一部分，这样三层结构产生了。 其中‘层’是逻辑上的划分。 三层体系结构是将整个系统划分为如图2.1所示的结构[3] （1）表现层（Presentation layer）：包含表示代码、用户交互GUI、数据验证。 该层用于向客户端用户提供GUI交互，它允许用户
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他