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 相关文章推荐
JavaScript中json使用自己总结
Aug 13 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
js编写的treeview使用方法
Nov 11 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
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
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
php单例模式示例分享
2015/02/12 PHP
js自动生成对象的属性示例代码
2013/10/28 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
2019/05/08 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
Python排序函数的使用方法详解
2020/12/11 Python
Python 图片处理库exifread详解
2021/02/25 Python
财务助理岗位职责
2013/11/10 职场文书
单位未婚证明范本
2014/01/18 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
激励口号大全
2014/06/17 职场文书
中学语文教学反思
2016/02/16 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记