1 jsp文件
选择图片，实现图片预览功能，每选择一张图片，创建新的图片上传元素
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>JSP - Hello World</title>
<meta http-equiv="author" content="万码学堂">
</head>
<body>
<!-- 开始 ////////////////////////////////////////////////// -->
<style type="text/css">
.preview{
width: 100px;
}
</style>
<form enctype="multipart/form-data" method="post" action="${pageContext.request.contextPath}/web/upload">
<span id="span">
<img src="${pageContext.request.contextPath}/images/default.jpg" class="preview" id="preview" onclick="fileSelect()">
<input type="file" name="files" onchange="fileSelected()" style="display:none;">
</span>
<br>
<input type="submit" value="上传">
</form>
<script type="text/javascript">
function fileSelect() {
obj = event.target||event.srcElement;
//event是内置对象 event.target获得产生时间的img对象
//obj是点击的img对象
obj.nextElementSibling.click();
//obj.nextElementSibling是obj的下一个元素
}
function fileSelected() {
obj = event.target||event.srcElement;
//obj产生事件的事件源 就是点击的file对象
// 文件选择后触发次函数
if(obj.value!="")
{
var file = obj.files[0];//获得file文件域选择的文件路
var reader = new FileReader();
reader.onload = function(e){
obj.previousElementSibling.src=e.target.result;
//obj.previousElementSibling是obj对象的前一个元素
//回调方法,img显示选择的图片
}
reader.readAsDataURL(file);
//读取选择的图片文件
//添加文件上传组件 添加img和file
if(obj.nextElementSibling==null)//点击的是最后一组图片上传
{
insertElement();
}
}
else
{
alert("没有选择文件");
}
}
function insertElement()
{
var img = document.createElement("img");
//创建新的img元素
img.src = "${pageContext.request.contextPath}/images/default.jpg";
img.className = "preview";
img.onclick = fileSelect;
img.id = "preview";
var input = document.createElement("input");
input.type = "file";
input.onchange = fileSelected;
input.style = "display:none;";
input.name = "files";
var span = document.getElementById("span");
span.append(img);
span.append(input);
}
</script>
<!-- 结束 ///////////////////////////////////////////////// -->
</body>
</html>2 Controller
实现上传的图片的保存
package com.wanmait.demo.controller;
import org.apache.commons.io.FilenameUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
@Controller
@RequestMapping("web")
public class UploadController {
@PostMapping("upload")
public String upload(MultipartFile[] files, HttpServletRequest request)
{
String filepath = request.getServletContext().getRealPath("/images");
for(MultipartFile file:files)
{
if(!file.isEmpty()) {
String fileext = FilenameUtils.getExtension(file.getOriginalFilename());
String filename = UUID.randomUUID().toString() + "." + fileext;
try {
file.transferTo(new File(filepath + "/" + filename));
} catch (IOException e) {
e.printStackTrace();
}
}
}
return "web/success";
}
}3 实现效果
0条评论
点击登录参与评论