artDialog+plupload实现多文件上传


Posted in Javascript onJuly 19, 2016

Plupload简介

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

一、效果展示

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

artDialog+plupload实现多文件上传artDialog+plupload实现多文件上传

二、介绍

长话短说,采用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实现多文件上传,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
js GridView 实现自动计算操作代码
Mar 25 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 #Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 #Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 #Javascript
js实现动态创建的元素绑定事件
Jul 19 #Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 #Javascript
详谈JS中实现种子随机数及作用
Jul 19 #Javascript
全面了解JavaScript对象进阶
Jul 19 #Javascript
You might like
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
Python打印“菱形”星号代码方法
2018/02/05 Python
python实现list由于numpy array的转换
2018/04/04 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python3.4中清屏的处理方法
2020/07/06 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
python中字符串的编码与解码详析
2020/12/03 Python
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
运动会广播稿150字
2014/02/19 职场文书
我的小天地教学反思
2014/04/30 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
中学生自我评价2015
2015/03/03 职场文书
2015年售票员工作总结
2015/04/29 职场文书
超市主管竞聘书
2015/09/15 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python