码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2019-04-02 12:20:31      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:case   resolve   支持   adsi   []   提取   eal   lower   isp   

之前项目需求要做一个多附件上传 并显示上传文件 带删除操作 一筹莫展之际搜到某个兄弟发的博客感觉非常好用被我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)
@ResponseBody
public 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">
希望对你们有点帮助 有问题可以在下面留言 我看到了会及时回复



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

标签:case   resolve   支持   adsi   []   提取   eal   lower   isp   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!