artDialog+plupload实现多文件上传

网友投稿 203 2023-07-11


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文件

js代码

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

$(function() {

3 $('#uploadBtn').click(function() {

popUpDialog();

});

_plupload('tehttp://st','${pageContext.request.contextPath}/uploadfile');

});

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

文件上传

单个文件支持小于100M 选择文件

五、后台代码

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

这里附带一个下载的方法,是用文件流,根据文件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));

OutpuxBFpTaWQtStream 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 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 map = new HashMap();

map.put("result", flag);

return map;

}

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:总结在前端排序中遇到的问题
下一篇:EasyUI中在表单提交之前进行验证
相关文章

 发表评论

暂时没有评论,来抢沙发吧~