如何自定义点击按钮上传图片和文件的上传、下载
首先要搭建好ssm的基本环境
导入文件上传依赖的包
<!--文件上传-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
在SpringMVC配置文件中加入
<!--配置SpringMVC 文件上传的配置-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
<!--上传文件的最大大小 -->
<property name="maxUploadSize" value="1024000"></property>
<!--文件的字符集-->
<property name="defaultEncoding" value="UTE-8"></property>
</bean>
上传前端的代码
<form action="upload_image.do">
<div id="div_0" style="float: left">
<input id="file_0" type="file" name="files" style="display: none" οnchange="replace_image(0)">
<img id="image_0" οnclick="select_image(0)" style="cursor:pointer;padding: 5px"
src="upload_hover.jpg" width="90px" height="90px">
</div>
<input type="submit" name="" id="" value="提交" style="margin-top: 70px">
</form>
文件上传时,与普通的表达上传文件不同,需要注意几个地方,首先method=post,enctype=“multipart/form-data”,这两个条件是必须的,这里的Id设置的都是有意义的,input标签的个数是未知的,所以不同的标签的ID要不同,这里使用索引的方法,每增加一个文件,将ID+1,即_后面的数字是动态变化的根据用户上传的文件个数,当用户选择一个文件上传后,我么做的是,将显示的上传按钮图片替换成我们上传的图片,此时在添加一个上image按钮
//将用户选择的图片加载到游览器上显示出来
function replace_image(index) {
/*获得图片对象*/
var blob_image = $("#file_" + index)[0].files[0];
var url = window.URL.createObjectURL(blob_image);
/*替换image*/
$("#image_" + index).attr("src", url);
add_image(index);
}
//当用户选择一张图片后,添加一个image
function add_image(index) {
var a = '<div id="div_' + (index + 1) + '" style="float: left">';
var b = '<input id="file_' + (index + 1) + '" type="file" name="files" style="display: none;" οnchange="replace_image(' + (index + 1) + ')">';
var c = '<img id="image_' + (index + 1) + '" οnclick="select_image(' + (index + 1) + ')" style="cursor:pointer;padding: 5px" src="upload_hover.jpg" width="90px" height="90px">';
var d = '</div>';
$("#div_" + index).after(a + b + c + d);
}
添加一个image时,所有的index的值加一,这时候功能完成了,但是发现有bug。当你点击选择的图片时,会让你选择新的图片,但是这个时候,会在你选择的图片后面新增一个imag,如下图
点击第一张图片后,选择新的图片
这不是我们想要的,怎么解决这个问题呢?我们想一下,只有点击最后一个图片的时候,是没有影响的,可以看我们的代码,当图片加载出来后,就新增一个image图片,所以解决的方法就是,判断你点击的这个图片是不是最后一个,只有最后一个,才让他添加图片,不是最后一个不让他添加图片。所以在replace_image函数添加一个判断,如下:
if ((index + 1) == length) {
// 用户选择的是最后一张图片
add_image(index);
}
这样就解决了,这样的方法在很多地方都会用到。前端代码解决了,下面来看后端。
后端spring给我们集成了文件上传,所以只要使用就行了,先在webapps下新加一个images文件夹,来看后台接受代码:FileController.java
@RequestMapping("/upload_image")
public String upload_image(@RequestParam("files") MultipartFile[] files) {
/*获取到存放文件的目录*/
String path = "E:\\Idea\\spring\\SSM_Collection\\src\\main\\webapp\\images";
/*创建一个数组来存放文件名*/
List<String> images_name = new ArrayList<>();
/*循环处理文件*/
for (int i = 0; i < files.length; i++) {
/*只有文件不为空时在处理*/
if (!files[i].isEmpty()) {
/*获得文件的原始名字*/
String originalFilename = files[i].getOriginalFilename();
/*生成唯一文件名,确保文件不会重复*/
String only_name = System.currentTimeMillis() + originalFilename;
String file_name = path + "/" + only_name;
try {
/*将文件存储到指定的文件夹下*/
files[i].transferTo(new File(file_name));
/*将文件名添加到文件名集合中*/
images_name.add(file_name);
} catch (IOException e) {
e.printStackTrace();
}
} else {
/*什么也不做*/
}
}
return "success";
}
在接受参数时,使用multipartFile这个对象来接受,@RequestParam(“files”)来指定页面参数的名字,首先path为上传文件存放的目录,文件名集合的目的是,可以保存到数据库,想要取这张图片时用,可能用户上传的文件时多个,所以先遍历文件,单个的处理文件,具体代码,很简单,看一下基本上都会了。运行项目,上传图片,看images有没有图片。
下面来演示Ajax来上传文件
使用ajax来上传时,在form先将action去掉,添加一个id,因为ajax会有调用的方法参数,再将submit的type改为button。添加一个click事件。
function upload_file() {
var form_data = new FormData($("#form_file")[0]);
$.ajax({
type:'POST',
url:'upload.do',
data:form_data,
cache : false,
processData : false,
contentType : false,
}).success(function (data) {
var result = JSON.parse(data);
alert(result.back());
}).error(function () {
alert("上传失败!")
});
}
FileController.java,代码是一样的,只是添加一个ResponseBody
@RequestMapping("/upload")
@ResponseBody
public Object upload(@RequestParam("files") MultipartFile[] files) {
/*获取到存放文件的目录*/
String path = "E:\\Idea\\spring\\SSM_Collection\\src\\main\\webapp\\images";
/*创建一个数组来存放文件名*/
List<String> images_name = new ArrayList<>();
/*循环处理文件*/
for (int i = 0; i < files.length; i++) {
/*只有文件不为空时在处理*/
if (!files[i].isEmpty()) {
/*获得文件的原始名字*/
String originalFilename = files[i].getOriginalFilename();
/*生成唯一文件名,确保文件不会重复*/
String only_name = System.currentTimeMillis() + originalFilename;
String file_name = path + "/" + only_name;
try {
/*将文件存储到指定的文件夹下*/
files[i].transferTo(new File(file_name));
/*将文件名添加到文件名集合中*/
images_name.add(file_name);
} catch (IOException e) {
e.printStackTrace();
}
} else {
/*什么也不做*/
}
}
return "";
}
重新启动项目,点击提交,页面不动,因为我们后台没有上传数据到后台,但是看images下有新上传的文件。
文件的下载
先看前端代码
<img src="images/1558021489763SSM_02.jpg" id="download" name="1558021489763SSM_02.jpg">
<button onclick="download_file()">下载</button>
function download_file() {
var filename = $("#download").attr("name");
window.location.href="download.do?filename="+filename;
}
后端代码,SpringMVC 已经提供好了
@RequestMapping("/download")
public ResponseEntity<byte[]> download(HttpServletRequest request, @RequestParam("filename") String filename, Model model) throws Exception {
//下载文件路径
String path = request.getServletContext().getRealPath("/images/");
File file = new File(path + File.separator + filename);
HttpHeaders headers = new HttpHeaders();
//下载显示的文件名,解决中文名称乱码问题
String downloadFielName = new String(filename.getBytes("UTF-8"), "iso-8859-1");
//通知浏览器以attachment(下载方式)打开图片
headers.setContentDispositionFormData("attachment", downloadFielName);
//application/octet-stream : 二进制流数据(最常见的文件下载)。
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file),
headers, HttpStatus.CREATED);
}
这样就好了。