Springmvc file多附件上传 显示 删除操作

之前项目需求要做一个多附件上传 并显示上传文件 带删除操作 一筹莫展之际搜到某个兄弟发的博客感觉非常好用被我copy下来了此贴算是改良版 再次感谢(忘记叫什么了时间也有点久没有历史记录了)先上图

基于springmvc附件上传 所需jar包

commons.fileupload-1.2.0.jar

commons.io-1.4.0.jar

这个是我使用的jar包有需要的可以直接百度网盘下载 里面有好几个版本 自行选择 放在lib下面 使用的话maven 直接下载也可以

链接:https://pan.baidu.com/s/1gs0BBZZmh_-s-xIT7zm56g
提取码:86ne

jar包配置完成之后

1.在spring-mvc.xml配置文件下加入

<!-- 文件上传支持 --><bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    <property name="maxUploadSize" value="100000000"/>//上传文件大小最大限制    <property name="maxInMemorySize" value="1000000"/>//</bean>

2.前端jsp页面

<form id="deviation" method="post">    <div>        <a href="javascript:void(0)">附件上传‘<input type="file" class="iptFile" name="files" onchange="upFile(this)"></a>        <span class="no_file"></span>        <ul class="upload-enclosure-ul"> <%-- 根据上传的文件生成 每个 li--%>        </ul>    </div>    <input type="button" value="提交" onclick="UpladFile()"></form>
3.js
function upFile(a) {    var flag = $(a);    if (!flag[0].files || !flag[0].files[0]) {        return;    }    var name = flag[0].files[0].name;//文件名    var suffix = suffixName(name)[0].toLowerCase(); //后缀名    var size = flag[0].files[0].size;  //文件大小    var fr = new FileReader(); // 这个FileReader应该对应于每一个读取的文件都需要重新new一个    var files = flag[0].files[0]; // files可以获取当前文件输入框中选择的所有文件,返回列表    fr.readAsDataURL(files); // 读取的内容是加密以后的本地文件路径    fr.onload = function (e) { // 数据读取完成时触发onload对应的响应函数        var timeStamp = Math.floor(Math.random() * 10000); //自定义一个随机数        $(flag).parent().addClass(‘li‘ + timeStamp).hide(); //每次隐藏之前添加一个Class        var html = ‘<a href="javascript:void(0)" >附件上传\n‘ +            ‘<input type="file" class="iptFile" name="files" onchange="upFile(this)">\n‘ +            ‘</a>‘;

        $(‘.no_file‘).before(html);//每次生成一个input file  插入到节点        var li = display(suffix, files, timeStamp, name);        if ($(‘.upload-enclosure-ul li‘).length < 10) {  //判断不能超过10个  可自行写入多少            $(‘.upload-enclosure-ul‘).append(li);

        } else {            layer.alert("对不起,最多能选择10个附件!", 16, true);        }

    };}

function display(suffix, files, timeStamp, name) {    var li;    if (suffix == ‘.jpg‘ || suffix == ‘.jpeg‘ || suffix == ‘.png‘ || suffix == ‘.bmp‘ || suffix == ‘.gif‘) { //图片格式        li = ‘<li> <span><i class="fa fa-file-image-o">&nbsp;</i>‘ + name + ‘</span> <span class="size">(‘ + parseInt(files.size / 1000) + ‘kb)</span> <span class="remove" data-class="li‘ + timeStamp + ‘"  onclick="deleteLi(this)">删除</span> </li>‘;    } else if (suffix == ‘.doc‘ || suffix == ‘.docx‘) {//word格式        li = ‘<li><span><i class="fa fa-file-word-o">&nbsp;</i>‘ + name + ‘</span> <span class="size">(‘ + parseInt(files.size / 1000) + ‘kb)</span> <span class="remove" data-class="li‘ + timeStamp + ‘"  onclick="deleteLi(this)">删除</span> </li>‘;    } else if (suffix == ‘.xls‘ || suffix == ‘.xlsx‘) {//excel格式        li = ‘<li><span><i class="fa fa-file-excel-o">&nbsp;</i>‘ + name + ‘</span> <span class="size">(‘ + parseInt(files.size / 1000) + ‘kb)</span> <span class="remove" data-class="li‘ + timeStamp + ‘"  onclick="deleteLi(this)">删除</span> </li>‘;    } else if (suffix == ‘.ppt‘ || suffix == ‘.pptx‘) {//PPT格式        li = ‘<li><span><i class="fa fa-file-pdf-o">&nbsp;</i>‘ + name + ‘</span> <span class="size">(‘ + parseInt(files.size / 1000) + ‘kb)</span> <span class="remove" data-class="li‘ + timeStamp + ‘"  onclick="deleteLi(this)">删除</span> </li>‘;    } else if (suffix == ‘.ppt‘ || suffix == ‘.pdf‘) {//PDF格式        li = ‘<li><span><i class="fa fa-file-pdf-o">&nbsp;</i>‘ + name + ‘</span> <span class="size">(‘ + parseInt(files.size / 1000) + ‘kb)</span> <span class="remove" data-class="li‘ + timeStamp + ‘"  onclick="deleteLi(this)">删除</span> </li>‘;    } else if (suffix == ‘.zip‘ || suffix == ‘.rar‘ || suffix == ‘.7z‘) {//压缩格式        li = ‘<li><span><i class="fa fa-file-excel-o">&nbsp;</i>‘ + name + ‘</span> <span class="size">(‘ + parseInt(files.size / 1000) + ‘kb)</span> <span class="remove" data-class="li‘ + timeStamp + ‘"  onclick="deleteLi(this)">删除</span> </li>‘;    } else if (suffix == ‘.wav‘ || suffix == ‘.mp3‘ || suffix == ‘.aac‘ || suffix == ‘.wma‘) {//声音格式        li = ‘<li><span><i class="fa fa-file-video-o">&nbsp;</i>‘ + name + ‘</span> <span class="size">(‘ + parseInt(files.size / 1000) + ‘kb)</span> <span class="remove" data-class="li‘ + timeStamp + ‘"  onclick="deleteLi(this)">删除</span> </li>‘;    } else if (suffix == ‘.avi‘ || suffix == ‘.mp4‘ || suffix == ‘.mov‘ || suffix == ‘.mkv‘ || suffix == ‘.rm‘ || suffix == ‘.rmvb‘ || suffix == ‘.mpg‘ || suffix == ‘.mpeg‘) {//视频格式        li = ‘<li><span><i class="fa fa-file-video-o">&nbsp;</i>‘ + name + ‘</span> <span class="size">(‘ + parseInt(files.size / 1000) + ‘kb)</span> <span class="remove" data-class="li‘ + timeStamp + ‘"  onclick="deleteLi(this)">删除</span> </li>‘;    } else if (suffix == ‘.txt‘) {//文本格式        li = ‘<li><span><i class="fa fa-file-text-o">&nbsp;</i>‘ + name + ‘</span> <span class="size">(‘ + parseInt(files.size / 1000) + ‘kb)</span> <span class="remove" data-class="li‘ + timeStamp + ‘"  onclick="deleteLi(this)">删除</span> </li>‘;    } else {        li = ‘<li><span><i class="fa fa-file-o">&nbsp;</i>‘ + name + ‘</span> <span class="size">(‘ + parseInt(files.size / 1000) + ‘kb)</span> <span class="remove" data-class="li‘ + timeStamp + ‘"  onclick="deleteLi(this)">删除</span> </li>‘;    }    return li;}

function deleteLi(a) {    $(a).parent().remove();    var attr = "." + $(a).attr(‘data-class‘);    $(attr).remove(); //删除对应 input file    if ($(‘.li‘).length != 0) { // 显示隐藏 未选择文件字眼        $(‘.no_file‘).hide();    } else {        $(‘.no_file‘).show();    }}

function suffixName(file_name) {    var result = /\.[^\.]+/.exec(file_name);    return result;}

/*   附件上传    */function UpladFile() {    var formData = new FormData($("#deviation")[0]);    $.ajax({        type: ‘POST‘,        url: ‘<c:url value="/product/deviation/action.do?method=upload"/>‘,//自己后台controller路径        data: formData,        contentType: false,        cache: false,        processData: false,        contentType: false    }).success(function (data) {

    }).error(function () {        alert("上传失败");    });}

4.后端java
@Controller@RequestMapping(value = "/product/deviation/action.do")public class ActionController {
/*多附件上传 */@RequestMapping(params = {"method=upload"}, method = RequestMethod.POST)@ResponseBodypublic void fileupload(@RequestParam("files") MultipartFile[] files, HttpServletRequest request) throws IOException {    //获取服务器中保存文件的路径    String path = request.getSession().getServletContext().getRealPath("") + "\\enclosure\\";    System.out.println(path);    for (int i = 0; i < files.length; i++) {        MultipartFile file = files[i];        //保存文件        try {            if (!file.isEmpty()) {                File filepath = new File(path);                if (!filepath.exists()) //判断如果没有enclosure文件夹自动创建                    filepath.mkdirs();                // 文件保存路径                String savePath = path + file.getOriginalFilename();                // 转存文件                file.transferTo(new File(savePath));                //附件上传成功后 将 name url 保存到数据库中

            }        } catch (Exception e) {            e.printStackTrace();        }    }

}
}

5.我是根据ajax提交 也可以直接form表单提交 java代码不变前端form加上 enctype="multipart/form-data"就ok了 
<form id="deviation" method="post" enctype="multipart/form-data">
希望对你们有点帮助 有问题可以在下面留言 我看到了会及时回复

原文地址:https://www.cnblogs.com/liukai123/p/10641066.html

时间: 2024-11-06 07:28:05

Springmvc file多附件上传 显示 删除操作的相关文章

文件上传, 打开, 删除操作

protected void Btn_Up_Click(object sender, EventArgs e)    { // Specify the path on the server to          // save the uploaded file to.          // String savePath = @"D:/WebSite/FileUpload/UploadedImages/";        String savePath = @"\\19

java操作FTP,实现文件上传下载删除操作

上传文件到FTP服务器: /** * Description: 向FTP服务器上传文件 * @param url FTP服务器hostname * @param port FTP服务器端口,如果默认端口请写-1 * @param username FTP登录账号 * @param password FTP登录密码 * @param path FTP服务器保存目录 * @param filename 上传到FTP服务器上的文件名 * @param input 输入流 * @return 成功返回t

SpringMVC实现单文件上传、多文件上传、文件列表显示、文件下载

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文详细讲解了SpringMVC实例单文件上传.多文件上传.文件列表显示.文件下载. 一.新建一个Web工程,导入相关的包 springmvc的包+commons-fileupload.jar+connom-io.jar+commons-logging,jar+jstl.jar+standard.jar 整个相关的包如下: 整个工程目录如下: 二.配置web.xml和SpringMVC文件

使用plupload做一个类似qq邮箱附件上传的效果

公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可以添加多个附件,也可一个都不添加 以其中一个为例:(文件保存到了数据库中),有关plupload的内容可参考:http://www.360doc.com/content/14/0714/03/552866_394228686.shtml 首先是po package cn.com.plupload.p

asp.net结合uploadify实现多附件上传

1.说明 uploadify是一款优秀jQuery插件,主要功能是批量上传文件.大多数同学对多附件上传感到棘手,现将asp.net结合uploadfiy如何实现批量上传附件给大家讲解一下,有什么不对的地方还请大家多多交流沟通,下面把代码贴出来大家一起交流. 2.组成 首先说明一下代码实现所用到的技术,仅供参考: 开发工具:vs2010 目标框架:.NET Framework3.5 Uploadify:uploadify-v3.1 Jquery:jquery-1.8.1.js 最后我会将整个Dem

基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

很久之前,当我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中如何使用这个组件进行文件上传的,当时上传文件的处理主要也是使用ashx一般处理程序来进行处理的.本文主要介绍我的Web开发框架中,在MVC4的环境中如何集成这个非常棒的文件上传组件的. 1.上传组件uploadify的说明及脚本引用 Uploadify 是 JQuery 一个著名的上传插件,利用 Flash

基础资料功能开发(附件上传、查看,获取当前用户信息、时间)

1.数据库建表.SYS_MODULE挂菜单.给菜单添加权限 2.创建Action.Dao.model.service... 3.struts-aqxx.xml配置 <action name="zlaqJczl/*" method="{1}" class="com.tech15.aqxx.action.ZlaqJczlAction"> <result name="*" type="direct&quo

基于MVC4+EasyUI的Web开发框架形成之旅(4)--附件上传组件uploadify的使用

大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中如何使用这个组件进行文件上传的,当时上传文件的处理主要也是使用ashx一般处理程序来进行处理的.本文主要介绍我的Web开发框架中,在MVC4的环境中如何集成这个非常棒的文件上传组件的. 1.上传组件uploadify的说明及脚本引用 Uploadify 是 JQuery 一个著名的上传插件,利用 Flash

SpringMVC实现文件的上传和下载

前些天一位江苏经贸的学弟跟我留言问了我这样一个问题:"用什么技术来实现一般网页上文件的上传和下载?是框架还是Java中的IO流".我回复他说:"使用SpringMVC框架可以做到这一点,因为SpringMVC为文件的上传提供了直接的支持,但需要依赖Apache提供Commons FileUpload组件jar包."鉴于这个问题,我上网也百度了一下,网上很多都是介绍的使用IO流来实现文件的上传和下载,也有说到框架的,但介绍的并不是很完整,今天小钱将和大家介绍使用Spr