- 浏览: 165775 次
- 性别:
- 来自: 重庆
-
博客专栏
-
-
Angularjs实战
浏览量:19660
文章分类
- 全部博客 (98)
- 工具 (2)
- 字符编码问题 (1)
- 微信开发调试工具 (2)
- java (10)
- spring (2)
- mybatis (2)
- spring boot (2)
- 其他 (1)
- spring ajax (1)
- jquery (4)
- 中间件 (3)
- oracle数据库 (2)
- oracle (1)
- 文件上传 (1)
- AngularJS (23)
- css (4)
- js (9)
- Iconfont (1)
- 个人 (1)
- WebLogic (4)
- maven (2)
- 转载 (1)
- File (2)
- webupload (4)
- tomcat (2)
- linux (2)
- Jersey (11)
- 脚本 (1)
- ftp (1)
- xdata (1)
- 钉钉 (1)
- 文档转换 (3)
- ionic (1)
- vue (2)
最新评论
-
masuweng:
java批量将多文件打包成zip格式 -
柳絮飞祭奠:
// 读取错误执行的返回流 是这个 B ...
java调用执行cmd指令启动weblogic -
109:
您好,我想知道在startServer怎么判断它是错误执行的流 ...
java调用执行cmd指令启动weblogic -
williamfan:
dataSourceConfig.getUrl()这个可以直接 ...
spring boot和mybatis入门
一、当我们使用jersey框架封装的restful进行文件上传时,会出现中文乱码,试用了过滤器设置编码都不管用。仔细想了很久解决办法,就用一个servelt来代替这个上传的restful接口实现上传的逻辑。
二、不过后来对restful设计风格和jersey底层的初步研究,发现其实可以使用jersey作为入口来接收文件流,处理还是用apache提供的commons-fileupload-1.3.1.jar来实现,内部request请求设置
编码,就不会出现文件乱码
三、前端依旧是angular封装百度提供的webupload指令实现文件的上传和分片存储
四、逻辑如下
前端
后端
ending 附件带示例
二、不过后来对restful设计风格和jersey底层的初步研究,发现其实可以使用jersey作为入口来接收文件流,处理还是用apache提供的commons-fileupload-1.3.1.jar来实现,内部request请求设置
编码,就不会出现文件乱码
三、前端依旧是angular封装百度提供的webupload指令实现文件的上传和分片存储
四、逻辑如下
前端
<!DOCTYPE html> <html> <head> <title>柳絮飞祭奠</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../plugins/webuploader/webuploader.css" type="text/css"></link> </head> <body class="lx_droparea"> <lx-upload droparea="lx_droparea" id="upload" type="button" value="上传" style="width:80px;"></lx-ui-upload> </body> <script type="text/javascript" src="../plugins/jquery.js"></script> <script type="text/javascript" src="../plugins/angular.min.js"></script> <script type="text/javascript" src="../plugins/webuploader/webuploader.min.js"></script> <script type="text/javascript"> //设置lx.upload的配置信息 var $$runtime = {file:'/JerseyTest/api/1.0/my/upload', "swf":"",debug : true}; var lxUpload=angular.module("lx.upload",[]); /** * * */ lxUpload.directive('lxUpload',function(){ var option = { restrict : 'E', replace : true, template : '<div>上传文件</div>', scope:true, link : function($scope, $element, $attrs) { //声明作用域内上传数据对象 $scope.upload={"id":"","droparea":"","md5":"","length":0,"data":[],"tip":true,"isupload":false}; //设置上传文件id $scope.upload.id="#"+$attrs.id; $scope.upload.droparea="."+$attrs.droparea; WebUploader.Uploader.register({ "before-send-file" : "beforeSendFile" }, { // 时间点1:所有分块进行上传之前调用此函数 beforeSendFile : function(file) { var deferred = WebUploader.Deferred(); // 1、使用md5计算文件的唯一标记,用于断点续传 uploader.md5File(file).then(function(val) { $scope.upload.md5= val; console.log($scope.upload.md5); // 2.1.5延迟解决 deferred.resolve(); }); return deferred.promise(); }, }); var uploader = WebUploader.create({ // swf文件路径 swf : $$runtime.swf, // 文件接收服务端。 server : $$runtime.file, // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick : { id : $scope.upload.id, // 这个id是你要点击上传文件的id,自己设置就好</span> multiple : true }, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize : true, dnd:$scope.upload.droparea, auto : true, // 上传并发数 threads : 5, // 开启分片上传 chunked : true, chunkSize : 1 * 1024 * 1024, duplicate :true }); // // 声明WebUploader内【uploadBeforeSend】事件 // uploader.on("beforeFileQueued", function(file) { // if(!$scope.upload.isupload){ // $$alert("请选择文件夹",3); // return false; // } // }); // 声明WebUploader内【uploadBeforeSend】事件 uploader.on("fileQueued", function(block, data) { if($scope.upload.tip){ } $scope.upload.length++; // wenbuploader添加携带参数 }); // 声明WebUploader内【uploadBeforeSend】事件 uploader.on("uploadBeforeSend", function(block, data) { // wenbuploader添加携带参数 console.log($scope.upload.md5); data.fileMd5 = $scope.upload.md5; }); // 声明WebUploader内【uploadSuccess】事件 uploader.on("uploadSuccess", function(file, response) { $scope.upload.data.push(response[0]); $scope.upload.length--; if($scope.upload.length==0){ $scope.$emit('upload', $scope.upload.data); $scope.upload.data=[]; } }); } }; return option; }); //启动应用程序 angular.bootstrap(document,['lx.upload']); </script> </html>
后端
@POST @Path("/upload") @Produces({ MediaType.APPLICATION_JSON + ";charset=UTF-8" }) public String upload(@Context HttpServletRequest request) throws UnsupportedEncodingException { request.setCharacterEncoding("UTF-8"); // 获取或设置md5值 String nFileMd5 = null; // 获取或设置分片数值 String nChunk = "0"; // 文件地址拿去到配置中 File dir = new File(WebConfig.MAIN_UPLOAD_PATH); if (!dir.exists()) { if (!dir.mkdirs()) { throw new RuntimeException("Directory " + WebConfig.MAIN_UPLOAD_PATH + " not exists and can not create directory."); } } File nDirCACHE_PATH = new File(WebConfig.MAIN_UPLOAD_CACHE_PATH); if (!nDirCACHE_PATH.exists()) { if (!nDirCACHE_PATH.mkdirs()) { throw new RuntimeException("Directory " + WebConfig.MAIN_UPLOAD_CACHE_PATH + " not exists and can not create directory."); } } // 验证上传内容了类型 String contentType = request.getContentType(); if ((contentType.indexOf("multipart/form-data") >= 0)) { DiskFileItemFactory factory = new DiskFileItemFactory(); // 设置内存中存储文件的最大值 factory.setSizeThreshold(WebConfig.MAIN_UPLOAD_MAXSIZE); factory.setSizeThreshold(WebConfig.MAIN_UPLOAD_MEMORY_THRESHOLD); // 设置缓存路径 factory.setRepository(new File(WebConfig.MAIN_UPLOAD_CACHE_PATH)); // 创建一个新的文件上传处理程序 ServletFileUpload upload = new ServletFileUpload(factory); // 设置最大上传的文件大小 upload.setFileSizeMax(WebConfig.MAIN_UPLOAD_MAXSIZE); upload.setSizeMax(WebConfig.MAIN_UPLOAD_MAX_REQUEST_SIZE); try { // 解析获取的文件 List<FileItem> formItems = upload.parseRequest(request); for (FileItem file : formItems) { if (file.isFormField()) { String fieldName = file.getFieldName(); if (fieldName.equals("fileMd5")) { // 10.2.1.获取md5值 nFileMd5 = file.getString("utf-8"); } if (fieldName.equals("chunk")) { // 10.2.2.获取分片数值 nChunk = file.getString("utf-8"); } } else { Map<String, Object> nFileMap = new HashMap<String, Object>(); String nFileName = file.getName(); File nFile = new File(WebConfig.MAIN_UPLOAD_PATH + File.separator + nFileMd5); if (!nFile.exists()) { nFile.mkdir(); } file.write(new File(WebConfig.MAIN_UPLOAD_PATH + File.separator + nFileMd5 + File.separator + nChunk)); if (file.isInMemory()) { file.delete(); } } } } catch (Exception e) { e.printStackTrace(); } } return ""; }
ending 附件带示例
发表评论
-
Jersey RESTful WebService框架学习(九)读取图片显示
2018-10-20 11:35 1412后端代码: import java.io.File; im ... -
Angularjs自定义指令计算浏览器高度
2018-03-27 21:51 958<!DOCTYPE html> <html ... -
AngularJS封装webupload实现文件夹上传
2018-03-14 00:11 1870百度的webupload没有开放a ... -
滚动条滚动到底部触发事件
2018-03-13 18:22 11我们在做开发时,会出现内部滚动条,滚动加载数据的情况。 &l ... -
jquery监听滚动条
2018-03-05 14:40 988$(".lx").scroll(func ... -
Jersey RESTful WebService框架学习(八)文件下载防乱码
2018-01-28 14:07 1284最近在做下载时候 不同浏览器下载的文件一直出现乱码,不知道怎 ... -
AngularJS封装UEditor
2018-01-09 18:35 916<!DOCTYPE HTML> <html ... -
Angularjs的directive封装ztree
2017-12-16 13:41 1291一般我们做web开发都会用到树,恰好ztree为我们提供了多种 ... -
Jersey RESTful WebService框架学习(八)maven搭建
2017-11-26 16:30 1320一、pom文件: <project xmlns=&quo ... -
Jersey RESTful WebService框架学习(七)文件上传
2017-11-26 15:31 1721引入jar包:jersey-media-multipart-2 ... -
Jersey RESTful WebService框架学习(六)接收MultivaluedMap类型参数
2017-11-25 19:05 3520现在的web开发中有些工程会觉得实体bean的架构会比较重,现 ... -
Jersey RESTful WebService框架学习(五)使用@BeanParam
2017-11-24 21:36 4293第一步:定义一个实体类 注意:实体类的属性需要加上FormPa ... -
Jersey RESTful WebService框架学习(四)使用@FormParam
2017-11-24 21:19 1364前端 <form action="/Jerse ... -
Jersey RESTful WebService框架学习(三)使用@QueryParam
2017-11-22 12:50 1351介绍:@QueryParamuri路径请求参数写在方法的参数中 ... -
Jersey RESTful WebService框架学习(二)使用@PathParam
2017-11-21 13:20 1361@PathParamuri路径参数写在方法的参数中,获得请求路 ... -
AngularJS实战之cookie的读取
2017-11-21 12:53 1036<!DOCTYPE html> <html ... -
Jersey RESTful WebService框架学习(一)
2017-11-19 23:54 1674介绍:RESTful (Representation Stat ... -
AngularJS中$interval和$timeout的使用
2017-11-18 12:49 1266我们在项目中会出现定时刷新,延迟加载等多种场景。 接下来就看$ ... -
AngularJS实战之ngAnimate插件实现轮播
2017-11-08 21:44 1707第一步:引入angular-animate.js 第二步:注 ... -
基于Angular-animate.js和css实现的轮播图
2017-11-08 13:11 44<!DOCTYPE html> <html ...
相关推荐
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
MMC整流器技术解析:基于Matlab的双闭环控制策略与环流抑制性能研究,Matlab下的MMC整流器技术文档:18个子模块,双闭环控制稳定直流电压,环流抑制与最近电平逼近调制,优化桥臂电流波形,高效并网运行。,MMC整流器(Matlab),技术文档 1.MMC工作在整流侧,子模块个数N=18,直流侧电压Udc=25.2kV,交流侧电压6.6kV 2.控制器采用双闭环控制,外环控制直流电压,采用PI调节器,电流内环采用PI+前馈解耦; 3.环流抑制采用PI控制,能够抑制环流二倍频分量; 4.采用最近电平逼近调制(NLM), 5.均压排序:电容电压排序采用冒泡排序,判断桥臂电流方向确定投入切除; 结果: 1.输出的直流电压能够稳定在25.2kV; 2.有功功率,无功功率稳态时波形稳定,有功功率为3.2MW,无功稳定在0Var; 3.网侧电压电流波形均为对称的三相电压和三相电流波形,网侧电流THD=1.47%<2%,符合并网要求; 4.环流抑制后桥臂电流的波形得到改善,桥臂电流THD由9.57%降至1.93%,环流波形也可以看到得到抑制; 5.电容电压能够稳定变化 ,工作点关键词:MMC
Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪:基于功率反馈的扰动观察法调整电压方向研究,Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪:基于功率反馈的扰动观察法调整电压方向研究,Boost二级升压光伏并网结构,Simulink建模,MPPT最大功率点追踪,扰动观察法采用功率反馈方式,若ΔP>0,说明电压调整的方向正确,可以继续按原方向进行“干扰”;若ΔP<0,说明电压调整的方向错误,需要对“干扰”的方向进行改变。 ,Boost升压;光伏并网结构;Simulink建模;MPPT最大功率点追踪;扰动观察法;功率反馈;电压调整方向。,光伏并网结构中Boost升压MPPT控制策略的Simulink建模与功率反馈扰动观察法
STM32F103C8T6 USB寄存器开发详解(12)-键盘设备
科技活动人员数专指直接从事科技活动以及专门从事科技活动管理和为科技活动提供直接服务的人员数量
Matlab Simulink仿真探究Flyback反激式开关电源性能表现与优化策略,Matlab Simulink仿真探究Flyback反激式开关电源的工作机制,Matlab Simulimk仿真,Flyback反激式开关电源仿真 ,Matlab; Simulink仿真; Flyback反激式; 开关电源仿真,Matlab Simulink在Flyback反激式开关电源仿真中的应用
基于Comsol的埋地电缆电磁加热计算模型:深度解析温度场与电磁场分布学习资料与服务,COMSOL埋地电缆电磁加热计算模型:温度场与电磁场分布的解析与学习资源,comsol 埋地电缆电磁加热计算模型,可以得到埋地电缆温度场及电磁场分布,提供学习资料和服务, ,comsol;埋地电缆电磁加热计算模型;温度场分布;电磁场分布;学习资料;服务,Comsol埋地电缆电磁加热模型:温度场与电磁场分布学习资料及服务
1、文件内容:ibus-table-chinese-yong-1.4.6-3.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/ibus-table-chinese-yong-1.4.6-3.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊
基于51单片机protues仿真的汽车智能灯光控制系统设计(仿真图、源代码) 一、设计项目 根据本次设计的要求,设计出一款基于51单片机的自动切换远近光灯的设计。 技术条件与说明: 1. 设计硬件部分,中央处理器采用了STC89C51RC单片机; 2. 使用两个灯珠代表远近光灯,感光部分采用了光敏电阻,因为光敏电阻输出的是电压模拟信号,单片机不能直接处理模拟信号,所以经过ADC0832进行转化成数字信号; 3. 显示部分采用了LCD1602液晶,还增加按键部分电路,可以选择手自动切换远近光灯; 4. 用超声模块进行检测距离;
altermanager的企业微信告警服务
MyAgent测试版本在线下载
Comsol技术:可调BIC应用的二氧化钒VO2材料探索,Comsol模拟二氧化钒VO2的可调BIC特性研究,Comsol二氧化钒VO2可调BIC。 ,Comsol; 二氧化钒VO2; 可调BIC,Comsol二氧化钒VO2材料:可调BIC技术的关键应用
C++学生成绩管理系统源码
基于Matlab与Cplex的激励型需求响应模式:负荷转移与电价响应的差异化目标函数解析,基于Matlab与CPLEX的激励型需求响应负荷转移策略探索,激励型需求响应 matlab +cplex 激励型需求响应采用激励型需求响应方式对负荷进行转移,和电价响应模式不同,具体的目标函数如下 ,激励型需求响应; matlab + cplex; 负荷转移; 目标函数。,Matlab与Cplex结合的激励型需求响应模型及其负荷转移策略
scratch介绍(scratch说明).zip
内容概要:本文全面介绍了深度学习模型的概念、工作机制和发展历程,详细探讨了神经网络的构建和训练过程,包括反向传播算法和梯度下降方法。文中还列举了深度学习在图像识别、自然语言处理、医疗和金融等多个领域的应用实例,并讨论了当前面临的挑战,如数据依赖、计算资源需求、可解释性和对抗攻击等问题。最后,文章展望了未来的发展趋势,如与量子计算和区块链的融合,以及在更多领域的应用前景。 适合人群:对该领域有兴趣的技术人员、研究人员和学者,尤其适合那些希望深入了解深度学习原理和技术细节的读者。 使用场景及目标:①理解深度学习模型的基本原理和结构;②了解深度学习模型的具体应用案例;③掌握应对当前技术挑战的方向。 阅读建议:文章内容详尽丰富,读者应在阅读过程中注意理解各个关键技术的概念和原理,尤其是神经网络的构成及训练过程。同时也建议对比不同模型的特点及其在具体应用中的表现。
该文档提供了一个关于供应链管理系统开发的详细指南,重点介绍了项目安排、技术实现和框架搭建的相关内容。 文档分为以下几个关键部分: 项目安排:主要步骤包括搭建框架(1天),基础数据模块和权限管理(4天),以及应收应付和销售管理(5天)。 供应链概念:供应链系统的核心流程是通过采购商品放入仓库,并在销售时从仓库提取商品,涉及三个主要订单:采购订单、销售订单和调拨订单。 大数据的应用:介绍了数据挖掘、ETL(数据抽取)和BI(商业智能)在供应链管理中的应用。 技术实现:讲述了DAO(数据访问对象)的重用、服务层的重用、以及前端JS的继承机制、jQuery插件开发等技术细节。 系统框架搭建:包括Maven环境的配置、Web工程的创建、持久化类和映射文件的编写,以及Spring配置文件的实现。 DAO的需求和功能:供应链管理系统的各个模块都涉及分页查询、条件查询、删除、增加、修改操作等需求。 泛型的应用:通过示例说明了在Java语言中如何使用泛型来实现模块化和可扩展性。 文档非常技术导向,适合开发人员参考,用于构建供应链管理系统的架构和功能模块。
这份长达104页的手册由清华大学新闻与传播学院新媒体研究中心元宇宙文化实验室的余梦珑博士后及其团队精心编撰,内容详尽,覆盖了从基础概念、技术原理到实战案例的全方位指导。它不仅适合初学者快速了解DeepSeek的基本操作,也为有经验的用户提供了高级技巧和优化策略。
主题说明: 1、将mxtheme目录放置根目录 | 将mxpro目录放置template文件夹中 2、苹果cms后台-系统-网站参数配置-网站模板-选择mxpro 模板目录填写html 3、网站模板选择好之后一定要先访问前台,然后再进入后台设置 4、主题后台地址: MXTU MAX图图主题,/admin.php/admin/mxpro/mxproset admin.php改成你登录后台的xxx.php 5、首页幻灯片设置视频推荐9,自行后台设置 6、追剧周表在视频数据中,节目周期添加周一至周日自行添加,格式:一,二,三,四,五,六,日
运行GUI版本,可二开