单张图片上传并预览功能

最新推荐文章于 2021-06-03 06:46:28 发布

朕不需要昵称

最新推荐文章于 2021-06-03 06:46:28 发布

阅读量304

点赞数

分类专栏：代码分享文章标签：图片上传 springmvc

本文链接：https://blog.csdn.net/weixin_44795226/article/details/99703597

版权

代码分享专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单的图片上传功能

前端jsp页面
- 页面展示
后端springmvc
- UploadController 类

前端jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>图片上传</title>

<style type="text/css">
		.uploadDiv{
			height: 200px;
			text-align: center;
			margin-top: 100px;
		}
		#img{
			width:200px;
			height:200px;
		}
		#myload{
			display:none;
		}
		.btn{
			width:120px;
			height:30px;
			border-radius:20px;
			background:blue;
			border:none;
			background:linear-gradient(to right,#5D84CD,#084AC5);
		}
		.btnDiv{
			margin-top:30px;
			text-align:center;
		}
		
	</style>
</head>

<body>

<div class="uploadDiv">
	<img id="img" src=""/>
</div>
<div class="btnDiv">
	<input type="file" onchange="upload()" id="myload" >
	<input type="button" class="btn" value="上传" onclick="ready()">
</div>


<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function ready(){
	$('#myload').click();
}

function upload(){
	//预览图片
	var fileObj = document.getElementById('myload').files[0];	<!-- 根据id获取file对象 -->
	console.log(fileObj);										<!-- 在控制台打印file对象 -->
	var fileSize = fileObj.size;
	if(fileSize > 1024*1024){									<!-- 判断file大小，超过1M提示 -->
		alert("不能超过1M!");
		return false;
	}
	let url = window.webkitURL.createObjectURL(fileObj);		<!-- 生成图片地址,好像只支持html5 -->
	console.log(url);											<!-- 打印地址 -->
	document.getElementById('img').src=url;						<!-- 将地址赋值到img上，浏览器预览 -->
	
	
	//图片上传开始
	var formData = new FormData();			<!-- FormData对象实例 -->
	formData.append('file',fileObj);
	$.ajax({								<!-- ajax异步请求 -->
		url:'${pageContext.request.contextPath}/file/upload.action',
		data:formData,
		type:'post',
		contentType: false,
        processData: false,
        success:function(data){				<!-- 弹出上传结果框 -->
        	alert(data);
        }
	});
}
</script>
</body>
</html>

页面展示

前端界面展示

后端springmvc

springmvc
注意上传要加·commons-fileupload这个包
在springmvc.xml加上一下配置

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    
    <property name="maxUploadSize" value="10485760" />    
</bean>

UploadController 类

package com.mvc.controller;

import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

@Controller
@RequestMapping("/file")
public class UploadController {

	@ResponseBody
	@RequestMapping("/upload")
	public String upload(MultipartFile file) {
		try {
			int b;
			InputStream inputStream = file.getInputStream();
			
			String fileName = file.getOriginalFilename();
			OutputStream os = new FileOutputStream("E:/upload/"+fileName);	//上传路径
			
			while((b=inputStream.read()) != -1) {							//io流写入
				os.write(b);
			}
			System.out.println(fileName);
			
			//关流
			os.flush();
			os.close();
			inputStream.close();
			
			return "success";
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			return "fail";
		}
	}
}

朕不需要昵称

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单张图片上传并预览功能

简单的图片上传功能前端jsp页面页面展示后端springmvcUploadController 类前端jsp页面<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head&g...
复制链接

扫一扫

专栏目录