miniui实现多附件上传

最近项目要开发一个多附件上传问题管理的需求，我们项目前端用的是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 {//处理上传文件方法getFilesFromRequestList<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);}}})}

代码虽然不多，但是遇到的坑还是很多的^~^
希望小弟的一点经验能给大家提供一些参考或者思路。

miniui实现多附件上传相关推荐

discuz 删除系统自带的附件上传
由于使用了DBank的论坛附件程序,所以想去掉系统自带的附件上传程序,后台不能设置,研究了下,找到一下方法: 1. template\default\forum\editor_menu_forum. ...
java多附件上传实例demo
java多附件上传实例demo <%@ page language="java" import="java.util.*" pageEncoding=& ...
使用DOM方法实现多附件上传客户端
有时候需要传多个附件,再次我用javascript的dom方式实现了次功能,很实用的. 功能呢就是用户可以添加多个附件,每次点击添加添加一个新的上传文本域,对于已经添加的上传文本域,用户可以点击 ...
httpclient 多附件上传
多附件上传实例: /*** 多附件上传* @param host* @param uri* @param attachment 附件* @param param body参数* @return*/pu ...
soapui 证书_SoapUI入门之附件上传和配置Https请求
已经欠了一堆的作业了,吼吼~ 拖延症是个大bug,废话不多说,马上进入咱们SoapUI的学习中来吧~ 现在开始我们的SoapUI集成测试学习之道: 一.如何使用SoapUI进行附件上传做人还是不能这 ...
python autoit获取网页ajax数据_WebDriver + Python 调用AutoIt例子（实现139邮箱写信页的附件上传）...
PS: 前提 1. 安装好webdriver下python实现的环境 2. 安装好Autoit(默认安装就可以了) 3. 另外需要一个139邮箱账号,脚本运行时上传的图片在附件里面 #coding:c ...
ant react 上传_React实战之Ant Design—Upload上传_附件上传
React实战之Ant Design-Upload上传_附件上传 Upload组件大家都在官方文档中看过了,但写的时候还是会遇到许多问题,一些新手看了文档后感觉无从下手,本文过多的简绍就不说了,直接看 ...
（转）基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用
http://www.cnblogs.com/wuhuacong/p/3343967.html 大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随 ...
Airtable无法上传附件/图片；点击附件上传没反应；不安全的地址怎么设置为受信任；解决方法亲测有效
问题描述在使用Airtable的时候突然遇到附件上传不了的情况,就是或者是检查的时候刷新页面,点击附件上传反复出现下面这些信息: DevTools 无法加载来源映射:无法加载 net::ERR ...

miniui实现多附件上传

miniui实现多附件上传相关推荐

最新文章

热门文章