src内放设置自定义在网上寻找一张意为添加的图片,放入工程某目录下
<div class="picture">
<img onclick="select(this)" src="theme/addpi/addpicture.jpg" name="picture" id="big_img1" width="418" height="418">
</div>
隐藏文件选择标签,是为了美化界面界面,下图仅做演示,非本文代码全部实现
<div hidden="hidden">
<form name="Form2" id="form2" action="fileupload3" method="post" enctype="multipart/form-data"> //切记要加enctype="multipart/form-data",这是文件上传所设置的格式 且必须是post格式
<input type="file" name="file" id="f1" hidden="hidden" >
</form>
</div>
js+jq函数点击事件
function select(obj)//obj为被点击的对象,这个对象默认为js表示
{
$("#f1").val("");//要将之前的文件清空正在选择选择新的,避免原来已选过影响数据的传递
$('#f1').click();//模拟文件选择的点击事件
var select=document.getElementById("f1");
select.onchange=function(){//ajax向后台传送文件数据
var formData = new FormData(form2);
$.ajax({
url: 'fileupload3' ,
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (returndata) {
obj.setAttribute("src",returndata);
}
});
}
}
springmvc的控制器方法
每次选择将图片保存到工程某目录下,然后通过ajax回写到jsp页面去显示
@RequestMapping("fileupload3")
@ResponseBody
public String fileupload(HttpServletRequest request,HttpServletResponse response) throws Exception {
//获取服务器中保存文件的路径
String path = request.getSession().getServletContext().getRealPath("")+"\\theme\\addpi\\";
String localPaths="theme\\addpi\\";
//获取解析器
CommonsMultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());
//判断是否是文件
System.out.println(resolver.isMultipart(request));
if(resolver.isMultipart(request)){
//进行转换
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)(request);
//获取所有文件名称
Iterator<String> it = multiRequest.getFileNames();
while(it.hasNext()){
//根据文件名称取文件
MultipartFile file = multiRequest.getFile(it.next().toString());
String fileName = UUID.randomUUID()+file.getOriginalFilename();
System.out.println(fileName);
String localPath = path + fileName;
localPaths+=fileName;
//创建一个新的文件对象,创建时需要一个参数,参数是文件所需要保存的位置
File newFile = new File(localPath);
if (newFile.getParentFile() != null || !newFile.getParentFile().isDirectory()) {
// 创建父文件夹
newFile.getParentFile().mkdirs();
}
//上传的文件写入到指定的文件中
file.transferTo(newFile);
}
}
return localPaths;
}