miniui实现多附件上传
来源:互联网 发布:淘宝上卖的一碗泄油汤 编辑:程序博客网 时间:2024/05/21 00:17
最近项目要开发一个多附件上传问题管理的需求,我们项目前端用的是miniui +jquery ,于是去miniui官网看有没有多附件上传相关的组件,发现一个MultiUpload Window的表单控件,看了下源代码基本上可以实现我想要的功能,下面贴一下我几天的研究成果。
MultiUpload 是基于swfupload封装好的一个多附件上传的控件
minui多附件控件
请求页面需要引入multiupload.css、swfupload.js、swfupload.swf、multiupload.js、cancel.gif,可以去官网下载源代码拷贝到自己的项目中来
“uploadurl”要最好使用绝对路径,相对路径“/**/”可能出现请求404的问题
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="/resources/context/jspBase.jsp"%><!DOCTYPE html><html><head><base href="<%=basePath%>"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><title>Insert title here</title><%@ include file="/resources/context/headResource.jsp"%><link href="resources/plugins/multiUpload/multiupload.css" rel="stylesheet" type="text/css" /><style>html, body { overflow: hidden; /* overflow|overflow-x|overflow-y : visible|hidden|scroll|auto */ height: 100%; width: 100%; padding: 0; margin: 0;}</style></head><body> <script src="${basePath}resources/plugins/multiUpload/swfupload.js" type="text/javascript"></script> <script src="${basePath}resources/plugins/multiUpload/multiupload.js" type="text/javascript"></script> <!-- <script src="${basePath}/resources/plugins/multiUpload/boot.js" type="text/javascript"></script>--> <div class="mini-panel" style="width: 100%; height: 100%" showfooter="true" bodystyle="padding:0" borderStyle="border:0" showheader="false"> <div id="multiupload1" class="uc-multiupload" style="width: 100%; height: 100%" enctype="multipart/form-data" flashurl="${basePath}resources/plugins/multiUpload/swfupload.swf" uploadurl="${basePath}PmIssueController/upload" _autoupload="true" borderstyle="border:0" > </div> <div property="footer" style="padding:8px; text-align: center"> <a class="mini-button" onclick="onOk" style="width: 80px" iconcls="icon-ok">确定</a> <a class="mini-button" onclick="onCancel" style="width: 80px; margin-left: 50px" iconcls="icon-cancel">取消</a> </div> </div> <script type="text/javascript"> mini.parse(); var grid = mini.get("multiupload1"); function saveData() { CloseWindow("ok"); } function CloseWindow(action) { if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action); else window.close(); } function onOk(e) { saveData(); } function onCancel(e) { CloseWindow("cancel"); } function SetData(params) { grid.setPostParam(params); } function GetData() { var rows = grid.findRows(function (row) { if (row.status == 1) { return true; } }) return rows; } </script> <%@ include file="/resources/context/lazyResource.jsp"%></body></html>
controller部分:
注意: 多个文件上传并不是一次性上传多个文件而是一个上传完成后再上传另一个,有几个文件就会请求几次。
@ResponseBody @RequestMapping("upload") public Map<String, Object> upload(HttpServletRequest request,HttpServletResponse response) throws Exception{ //接收前台传过来的参数 String number = request.getParameter("number"); String attachmentType = request.getParameter("attachmentType"); String projectName = request.getParameter("projectName"); Map<String, Object> modelMap = new HashMap<String, Object>(); try { //处理上传文件方法getFilesFromRequest List<FileEntity> list = FileUtils.getFilesFromRequest(request); if (list == null || list.size() == 0) { throw new Exception("上传失败"); } for (FileEntity entity : list) {// response.getWriter().write(entity.getFileName()); newIssueService.fileUplode(number, attachmentType, entity); IssueAttachment issueAttachment = new IssueAttachment(); issueAttachment.setIssueNumber(number); issueAttachment.setProjectName(projectName); issueAttachment.setFileName(entity.getFileName()); issueAttachment.setFileType(entity.getFileType()); if(attachmentType.equals("directCouseAttachment")){ //"1"表示上传的是该种类的附件 issueAttachment.setDirectCouseAttachment("1"); }else if(attachmentType.equals("primaryCouseAttachment")){ issueAttachment.setPrimaryCouseAttachment("1"); } else if(attachmentType.equals("designImprovementAttachment")){ issueAttachment.setDesignImprovementAttachment("1"); }else if(attachmentType.equals("processImproveAttachment")){ issueAttachment.setProcessImproveAttachment("1"); }else if(attachmentType.equals("improvementResultAttachment")){ issueAttachment.setImprovementResultAttachment("1"); }else if(attachmentType.equals("negativeEffectAttachment")){ issueAttachment.setNegativeEffectAttachment("1"); }else if(attachmentType.equals("designRuleAttachment")){ issueAttachment.setDesignRuleAttachment("1"); }else if(attachmentType.equals("ctqProjectManageAttachment")){ issueAttachment.setCtqProjectManageAttachment("1"); } //写入数据库上传文件的相关信息 issueAttachmentService.create(issueAttachment,attachmentType); } modelMap.put("success", "true"); } catch (Exception e) { modelMap.put("success", "false"); } return modelMap; }
/** * 从request中提取上传的文件列表 * * @param request HttpServletRequest */ public static List<FileEntity> getFilesFromRequest(HttpServletRequest request) { List<FileEntity> files = new ArrayList<FileEntity>(); //多附件上传需要用到的MultipartHttpServletRequest,可以度娘一下它的用法 MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; Map<String, MultipartFile> fileMap = multipartRequest.getFileMap(); try { for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) { InputStream inputstream = entity.getValue().getInputStream(); if (!(inputstream.markSupported())) { inputstream = new PushbackInputStream(inputstream, 8); } String fileName = entity.getValue().getOriginalFilename(); String prefix = fileName.lastIndexOf(".") >= 1 ? fileName.substring(fileName.lastIndexOf(".") + 1) : null; FileEntity file = new FileEntity(); file.setInputStream(inputstream); file.setFileType(prefix); file.setFileName(fileName); files.add(file); } } catch (IOException e) { e.printStackTrace(); } return files; }
/** * issue附件上传客户端到服务器 * @throws Exception */ public void fileUplode(String number,String attachmentType,FileEntity entity) throws Exception { //number为流水编号、attachmentType为上传附件的类型,entity文件实体类 OutputStream os = null; try { File outfile = creatTempFile(number,attachmentType); File toFile = new File(outfile, entity.getFileName()); // 创建一个输出流 os = new FileOutputStream(toFile); // 设置缓存 byte[] buffer = new byte[1024]; int length = 0; // 读取myFile文件输出到toFile文件中 while ((length = entity.getInputStream().read(buffer)) > 0) { os.write(buffer, 0, length); } } catch (Exception ex) { String falsemes = ""; if (ex.getCause() != null) { falsemes = ex.getCause().getMessage(); } throw new Exception(ex.getMessage() + falsemes); } finally { try { if (os != null) { os.close(); } } catch (IOException e) { throw new Exception(e.getMessage()); } } }
上传面板页面
function openW(e) { var number = $("#issueForm")[0].issueNumber.value; var projectName = $("#issueForm")[0].projectName.value; mini.open({ title: "上传面板", //url: "src/uploadwindow.html", url: "PmIssueController/multiupload", width: 600, height: 350, allowResize: false, onload: function () { var iframe = this.getIFrameEl(); var data = {number: number ,attachmentType: e ,projectName: projectName}; //模拟传递上传参数 iframe.contentWindow.SetData(data); }, ondestroy: function (action) { if (action == "ok") { var iframe = this.getIFrameEl(); var data = iframe.contentWindow.GetData(); data = mini.clone(data); var json = mini.encode(data); // alert("已完成上传数据:\n" + json); } } }) }
代码虽然不多,但是遇到的坑还是很多的^~^
希望小弟的一点经验能给大家提供一些参考或者思路。
阅读全文
1 0
- miniui实现多附件上传
- struts实现多附件上传
- Servlet 实现上传附件(支持多附件)
- Struts2 实现上传附件(支持多附件)
- STRUTS实现多附件上传(转)
- DOM案例-----实现多附件上传
- ASP.NET WebApi 实现多附件上传
- Uploadify实现多附件上传功能
- 上传附件的实现
- 实现上传附件
- 附件上传模块实现
- Struts2.0实现的文件上传(单附件和多附件)以及附件下载功能
- Struts2.0实现的文件上传(单附件和多附件)以及附件下载功能
- Struts2.0实现的文件上传(单附件和多附件)以及附件下载功能
- js 添加附件,附件上传,多附件上传
- js 添加附件,附件上传,多附件上传
- Jsp实现附件上传功能
- .NET MVC 实现上传附件
- PHP后端接收不到AngularJs中$http.post发送的数据的问题
- php 多维数组转一维数组
- 【转】Android ROM研究---Android build system增加模块
- ie删除文件html
- Android jenkins 打包发布
- miniui实现多附件上传
- pthread.h提示error C2011: “timespec”:“struct”类型重定义
- 对异或的理解
- java 抽奖
- NLP点滴——文本相似度,计算文本间的距离
- 剑指offer---包含min函数的栈
- 一个YAFFS引发的一系列问题
- HDU 4970 Killing Monsters(树状数组VS思维)
- canvas使用案例