artDialog+plupload实现多文件上传

Plupload简介

Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件。Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制。

一、效果展示

包括文件上传面板以及文件上传列表

二、介绍

长话短说,采用spring springMVC mybatis maven mysql,实现多文件上传功能,下载使用的是流的形式。

其中涉及的分页我会另开一片博客介绍。

三、准备材料

plupload

artDialog

还有一份初始化插件的js文件

这些可以直接从我的分享连接里面下载

链接:http://pan.baidu.com/s/1c27cTAK 密码:btqj

还有jquery 这个自行下载

四、前台代码

引入样式以及js文件

<link rel="stylesheet" href="resources/css/plupload.css" type="text/css">
<script src="resources/js/jquery.min.js"></script>
<script src="resources/upload/plupload.full.min.js"></script>
<script src="resources/artDialog4.1.7/artDialog.source.js?skin=blue"></script>
<script src="resources/js/upload.js"></script>

js代码

_plupload(绑定的uuid,文件上传路径);①关于绑定的uuid,我举个例子,当前用户的id就是uuid,你可以把用户id和你上传的文件相关联,以后查询的话根据用户id就能查询这个用户上传的所有文件②这个方法是封装过的,在upload.js里面能看到,我里面注释写的很清楚,也可以参考官方文档

$(function() {
  3   $('#uploadBtn').click(function() {
   popUpDialog();
  });
  _plupload('test','${pageContext.request.contextPath}/uploadfile');
 });

页面代码,一个按钮,一个弹出框

<a id="uploadBtn" class="optionbtn inline" href="#">文件上传</a>
 <!-- 触发弹出框 -->
 <div id="uploadContent" style="display: none; height: 300px; overflow-x: hidden; overflow-y: auto;">
  <div id="choosefile">
   <span>单个文件支持小于100M</span><br /> <a id="uploadify" href="javascript:void(0);">选择文件</a>
  </div>
  <div id="uploadfileQueue" style="border: 1px solid #a7c5e2; height: 228px; width: 350px;"></div>
 </div>
 <pre id="console"></pre>

五、后台代码

我都没有封装成方法,为了看得明白,可以自己封装一下

/**
  * 文件上传请求地址
  *
  * @param request
  * @param response
  */
 @RequestMapping("uploadfile")
 public void upload(HttpServletRequest request, HttpServletResponse response) {
  MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;// 二进制上传
  CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("file");// 获取文件
  String unid = UUID.randomUUID().toString().replace("-", "");/* 文件主键 */
  String originalFilename = file.getOriginalFilename();/* 原文件名,包括后缀 */
  String flieSize = String.valueOf(file.getSize());/* 文件大小 */
  String path = null;/* 文件存储路径 */
  String punid = request.getParameter("punid"); /* 关联文件punid */
  // 保存文件
  if (file != null) {
   try {
    String basePath = request.getSession().getServletContext().getRealPath("/uploadfile");
    SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");
    String subPath = sdf.format(new Date());
    path = basePath + subPath + unid + File.separator + originalFilename;
    // 如果文件夹不存在,就创建文件夹
    File dir = new File(path);
    if (!dir.exists()) {
     dir.mkdirs();
    }
    file.transferTo(dir);
   } catch (Exception e) {
    e.printStackTrace();
   }
  }
  // 文件大小转换
  long kb = 1024;
  long mb = kb * 1024;
  long gb = mb * 1024;
  long size = Long.parseLong(flieSize);
  if (size >= gb) {
   flieSize = String.format("%.1f GB", (float) size / gb);
  } else if (size >= mb) {
   float f = (float) size / mb;
   flieSize = String.format(f > 100 ? "%.0f MB" : "%.1f MB", f);
  } else if (size >= kb) {
   float f = (float) size / kb;
   flieSize = String.format(f > 100 ? "%.0f KB" : "%.1f KB", f);
  } else {
   flieSize = String.format("%d B", size);
  }
  // 存储文件信息进数据库
  FileUpload fileUpload = new FileUpload();
  fileUpload.setUnid(unid);
  fileUpload.setOriginalFilename(originalFilename);
  fileUpload.setFlieSize(flieSize);
  fileUpload.setPath(path);
  fileUpload.setPunid(punid);
  SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
  fileUpload.setFlieTime(df.format(new Date()));
  fileUploadService.insert(fileUpload);
 }

这里附带一个下载的方法,是用文件流,根据文件id来进行下载

@RequestMapping("downloadfile")
 public void downLoadfile(HttpServletRequest request, HttpServletResponse response) {
  String unid = request.getParameter("unid");
  FileUpload fileUpload = fileUploadService.selectByPrimaryKey(unid);
  if (fileUpload != null) {
   try {
    String filename = new String(fileUpload.getOriginalFilename().getBytes("GBK"), "ISO-8859-1");
    String path = fileUpload.getPath();
    response.setCharacterEncoding("utf-8");
    response.setContentType("application/octet-stream");
    response.setHeader("Content-Disposition", "attachment;fileName=" + filename);
    response.setHeader("Content-Length", fileUpload.getFlieSize());
     InputStream inputStream = new FileInputStream(new
     File(path));
     OutputStream os = response.getOutputStream();
     byte[] b = new byte[2048];
     int length;
     while ((length = inputStream.read(b)) > 0) {
     os.write(b, 0, length);
     }
     os.close();
     inputStream.close();
   } catch (FileNotFoundException e) {
    e.printStackTrace();
   } catch (IOException e) {
    e.printStackTrace();
   }
  }
 }

还有一个删除方法

/**
  * 文件删除
  *
  * @param request
  * @param response
  */
 @ResponseBody
 @RequestMapping("delfile")
 public Map<String, Object> delfile(HttpServletRequest request, HttpServletResponse response) {
  String unid = request.getParameter("unid");
  FileUpload fileUpload = fileUploadService.selectByPrimaryKey(unid);
  // 删除本地
  boolean flag = false;
  File file = new File(fileUpload.getPath());
  if (file.exists()) {// 路径为文件且不为空则进行删除
   flag = file.delete();
  }
  // 删除数据库
  int result = fileUploadService.deleteByPrimaryKey(unid);
  if (result > 0) {
   flag = true;
  }
  Map<String, Object> map = new HashMap<String, Object>();
  map.put("result", flag);
  return map;
 }

以上所述是小编给大家介绍的artDialog+plupload实现多文件上传,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-07-17

artDialog双击会关闭对话框的修改过程分享

artDialog,一个jquery的对话框插件,很好用的说 但是在使用时发现鼠标双击时会自半对话框,查看源码发现有个监听鼠标双击的事件如下图:  简单的方法就是把该行去掉,为了扩展可改成如下图:  这样就可以动态配置是否需要此功能使用方法如下图: 复制代码 代码如下: $.dialog({ title : json.theme, content : json.content, dbclickHide:true, ////默认false,如果为true则双击就会关闭窗口 lock : true,

给artDialog 5.02 增加ajax get功能详细介绍

之前用过artDialog 5.0之前版本,非常佩服作者的创意和敬业精神,现在新版的功能朝着轻量级js的方便发展,我还是比较喜欢之前artDialog.open的功能,直接方便.但就是之前版本有点大,我现在只想在artDialog增加一点从ajax get远程内容,我的代码如下: 复制代码 代码如下: $.extend({ _htmlDataArr:new Array(), _findHTML:function(url){ var hd_len= $._htmlDataArr.length; f

artdialog的图片/标题以及关闭按钮不显示的解决方法

因其它css样式文件中包含"div{ overflow:hidden; }"引起的artdialog的图片,标题,以及关闭按钮不显示的问题: 如下图:  解决办法:在artdialog的样式文件顶部添加一行:div{ overflow:visible; }  最终效果:

JS中artdialog弹出框控件之提交表单思路详解

artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口. 前言: 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 完善的接口 它的接口完善,可以轻易与外部程序配合使用.如异步写入消息.控制位置.尺寸.显示与隐藏.关闭等. 细致的体验 如果不是在输入状态,它支持Esc快捷键关

jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法

本文实例讲述了jQuery对话框插件ArtDialog在双击遮罩层时出现关闭现象的解决方法.分享给大家供大家参考,具体如下: 大家都知道,ArtDialog是一款非常不错的.轻量级的.基于jQuery的对话框插件,深受大家的追捧,大伙可以到一下地址进行下载: https://code.google.com/p/artdialog/ https://github.com/aui/artDialog 截止到2014年9月17日,已经有几个重大的版本v4.1.7.v5.0.4和v6.0.2,其中4.x

plupload+artdialog实现多平台上传文件

在没介绍正文之前先给大家介绍下plupload知识 plupload简介 Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制. plupload特性 Plupload使用jQuery的组件做为选择文件和上传文件的队列组件. Plupload使用Flash,Silverlight,HTML5,Gears,BrowserPlus.Fi

分享2个jQuery插件--jquery.fileupload与artdialog

这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法! 简单用代码举例子 最小化的方法 复制代码 代码如下: data-url是上传后执行上传文件的php方法 <input id="fileupload" type="file" name="

jQuery插件artDialog.js使用与关闭方法示例

本文实例讲述了jQuery插件artDialog.js使用与关闭方法.分享给大家供大家参考,具体如下: 子窗口关闭artdialog终极解决方案: window.parent.window.art.dialog({ id: 'qin123' }).close(); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载

artDialog是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验. artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 为了方便使用,特别制作出artDialog Dreamweaver代码提示的插件. 代码提示效果如下: 使用方法: 把artDialog.xml文件复制到 如:A

Jquery弹出窗口插件 LeanModal的使用方法

开发网站少不了要经常用弹出窗口的形式,今天在网上搜了个小插件LeanModal,记录于此,方便自己,亦方便他人使用. 此插件是个老外写的,体积小是它最大的优点,压缩后1k不到.当然,此插件是寄生于JQuery上. 一. 效果图 二.使用步骤: 1.引用Jquery.js和leanModal.min.js 复制代码 代码如下: <script src="Javascript/jquery-1.4.1.min.js" type="text/javascript"&

jQuery validate+artdialog+jquery form实现弹出表单思路详解

功能描述: 在页面弹出一个form表单,ajax无刷新提交表单,表单需通过验证. 适用范围: 适用于在列表页面新增,修改记录. 需要加载的js文件: jquery.min.js artDialog.js iframeTools.js jquery.form.js jquery.validate.js 实现思路: 在页面中将表单放到一个隐藏的容器中,用artdialog弹出该form并对form加上jqueryvalidate验证,提交采用jqueryform ajax提交,由于都是用现成的插件写

使用jQuery插件创建常规模态窗口登陆效果

 隐藏模态窗口技术是一种很好的解决方案,用于处理不是特有必要出现在网页上的界面元素.社交网络可以使用模态窗口传达私人讯息以及只针对会员才能看 到的表单.在博客和杂志网站也适用于与主网站分开的作者登陆页面,模态窗口比在JavaScript中创建新窗口更容易,因为使用HTML标记显示,所有 的东西能都呈现在同一个窗口中. 我将演示如何利用jQuery插件leanModal建立一个常规模态窗口.如果你有MIT general license,那么这个插件是完全开源和免费的,我很喜欢这个插件,用起来相当

jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制2D圆环图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D圆环图</title> <script type="text/javascript" src="js/jquery-

jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】

本文实例讲述了jQuery插件FusionCharts实现的MSBar2D图效果.分享给大家供大家参考,具体如下: 1.页面展示 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-T

jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制2D半圆环图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D半圆环图</title> <script type="text/javascript" src="js/jquer

jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】

本文实例讲述了jQuery插件FusionWidgets实现的AngularGauge图效果.分享给大家供大家参考,具体如下: 1.设置AngularGauge图的数据源 AngularGauge.xml: <?xml version="1.0" encoding="UTF-8"?> <chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="

jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】

本文实例讲述了jQuery插件HighCharts绘制2D金字塔图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D金字塔分布图</title> <script type="text/javascript" src="js/jqu

jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】

本文实例讲述了jQuery插件FusionWidgets实现的Cylinder图效果.分享给大家供大家参考,具体如下: 1.数据源 Cylinder.xml: <?xml version="1.0" encoding="UTF-8"?> <chart palette="4" lowerLimit="0" upperLimit="10000" numberSuffix=" ltrs

jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】

本文实例讲述了jQuery插件FusionWidgets实现的Bulb图效果.分享给大家供大家参考,具体如下: 1.数据源提供 Bulb.xml: <?xml version="1.0" encoding="UTF-8"?> <chart lowerLimit="0" upperLimit="100" caption="收入" numberPrefix="$" numb

jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】

本文实例讲述了jQuery插件FusionCharts实现的2D柱状图效果.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>FusionCharts最新FusionCharts2D柱状图</title> <script type="text/javascript" sr

jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】

本文实例讲述了jQuery插件FusionCharts绘制2D双折线图效果.分享给大家供大家参考,具体如下: 1.设计思路 (1)根据双折线图的特性和共性,设计出双折线图: (2)设置数据源XML格式 2.设计步骤 (1)写出双折线引入的图类型和数据源路径 var doubleLine = new FusionCharts( "FusionCharts/MSLine.swf", "doubleLineId", "100%", "540&