fileupload控件上传图片_18.实现网站上选择本地图片并上传至服务器

weixin_39617470

于 2020-11-29 12:07:59 发布

阅读量453

点赞数

文章标签： fileupload控件上传图片 laravel 图片本地实现前台访问在窗体中选择图片上的区域选择服务器上的文件

功能介绍：

本地选择照片上传至服务器。

需要引入的 jar 文件：commons-fileupload-1.3.2、commons-io-2.5.jar。

下载链接：

commons-fileupload.x.x.jar 文件：http://commons.apache.org/proper/commons-fileupload/
commons-io-x.x.jar 文件： http://commons.apache.org/proper/commons-io/ 下载。

将下载好的jar包复制到项目/WebContent/WEB-INF/lib 文件夹下：

实现代码：

fileUpload2.jsp:图片上传的界面页

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="../css/fileUpload2.css" />
</head>
<body >
<form action="/JavaEE17ToolDemo/file-upload-servlet" method="post" enctype="multipart/form-data">
<img alt="" id="img1" src="" style="height:300px;width: 200px">
<a class="a-upload">
  <input type="file" name="file" id="fileField" onchange="document.getElementById('img1').src=document.getElementById('fileField').value">点击这里上传文件
</a>
<br/>
	<input type="submit" value="上传">
</form>
</body>
</html>

fileUpload2.css： css文件

FileUploadServlet.java:文件上传处理

package

UploadMes.jsp:文件传输完成跳转页

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传结果</title>
</head>
<body>
<center>
	<h2>${message }</h2>
</center>

</body>
</html>

效果图: