当前位置： java上传图片并显示-java json上传图片
发布时间：2023-04-30 22:01 浏览次数：次 作者：佚名
简单java jsp页面上传图片
实现以下表单提交：
jsp页面代码
form 表单提交内容，需要设置编码格式为 enctype=”multipart/form-data” ，是将文件以二进制的形式上传java上传图片并显示java上传图片并显示，可以实现多种类型的文件上传
<form class="form form-horizontal" id="form-admin-add" action="reviewsave.action" method="post" onsubmit="return validate();" enctype="multipart/form-data">
<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
<tr class="text-c">
<th width="60">车主姓名th>
<td><input type="text" class="input-text" id="driver_name" name="rbean.driver_name">td>
<th width="60" colspan="2">车牌号码th>
<td><input type="text" class="input-text" id="car_no" name="rbean.car_no">td>
<th width="60" colspan="2">圆牌号码th>
<td><input type="text" class="input-text" id="round_card" name="rbean.round_card">td>
tr>
<tr class="text-c">
<th>车主电话th>
<td colspan="3"><input type="text" class="input-text" id="driver_tell" name="rbean.driver_tell">td>
<th >备用电话th>
<td colspan="3"><input type="text" class="input-text" id="driver_phone" name="rbean.driver_phone">td>
tr>
<tr class="text-c">
<th>驾照th>
<td colspan="3"><input type="text" class="input-text" id="driver_licence" name="rbean.driver_licence">td>
<th >行驶证th>
<td colspan="3"><input type="text" class="input-text" id="driver_permit" name="rbean.driver_permit">td>
tr>
<tr class="text-c">
<th>承包人th>
<td colspan="3"><input type="text" class="input-text" id="driver_name1" name="rbean.driver_name1">td>
<th >电话th>
<td colspan="3"><input type="text" class="input-text" id="driver_tell1" name="rbean.driver_tell1">td>
tr>
<tr class="text-c">
<th>承包人1th>
<td colspan="3"><input type="text" class="input-text" id="driver_name2" name="rbean.driver_name2">td>
<th >电话th>
<td colspan="3"><input type="text" class="input-text" id="driver_tell2" name="rbean.driver_tell2">td>
tr>
<tr class="text-c">
<th>承包人2th>
<td colspan="3"><input type="text" class="input-text" id="driver_name3" name="rbean.driver_name3">td>
<th >电话th>
<td colspan="3"><input type="text" class="input-text" id="driver_tell3" name="rbean.driver_tell3">td>
tr>
<tr class="text-c">
<th>承包人3th>
<td colspan="3"><input type="text" class="input-text" id="driver_name4" name="rbean.driver_name4">td>
<th >电话th>
<td colspan="3"><input type="text" class="input-text" id="driver_tell4" name="rbean.driver_tell4">td>
tr>
<tr class="text-c">
<th>备注th>
<td colspan="3"><textarea class="input-textmu" id="driver_marks" name="rbean.driver_marks" >textarea>td>
<th>车主照片th>
<td colspan="4"> <input type="file" name="image" id="image" onchange="preImg(this.id,'ImgPr');" />
<img id="ImgPr" src="" width="80px" height="80px" style="display: block;" />
td>
tr>
table>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3" >
<input class="btn btn-primary radius" type="submit" name="Submit" class="common_button" value=" 提交 ">
div>
div>
form>
//javascript 显示选择图片内容
<script type="text/javascript">
function getFileUrl(sourceId) {
var url;
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
url = document.getElementById(sourceId).value;
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
}
return url;
}
/**
* 将本地图片 显示到浏览器上
*/
function preImg(sourceId, targetId) {
var url = getFileUrl(sourceId);
var imgPre = document.getElementById(targetId);
imgPre.src = url;
}
script>
后台代码
private File image; //上传的文件
private String imageFileName; //文件名称
private String imageContentType; //文件类型
public File getImage() {
return image;
}
public void setImage(File image) {
this.image = image;
}
public String getImageFileName() {
return imageFileName;
}
public void setImageFileName(String imageFileName) {
this.imageFileName = imageFileName;
}
public String getImageContentType() {
return imageContentType;
}
public void setImageContentType(String imageContentType) {
this.imageContentType = imageContentType;
}
public static String createImageName() {
//根据时间生成文件名
SimpleDateFormat sdf = new SimpleDateFormat("yyMMddHHmmss");
String fileName = sdf.format(new Date());
//加上随机数，防止重复
Random rand = new Random();
fileName += String.valueOf(rand.nextInt(100));
return fileName;
}
public String addreview() throws Exception {
getResponse().setContentType("text/html;charset=utf-8");
//设置上传文件地址
String realpath = ServletActionContext.getServletContext().getRealPath("/driverImages");
//上传文件重新命名
String fileName = createImageName() +"."+getImageContentType().substring(getImageContentType().lastIndexOf("/")+1,getImageContentType().length());
//将页面传递的参数放在bean中
DriverBean dbean=new DriverBean();
// bean 和文件名 通过sql 存入数据库
int li_return = getRmanager().addreview(rbean,fileName);
if (li_return <= 0)
{
return "sorry";
}
//判断图片文件是否为空
if (image != null) {
//文件夹是否存在
File savefile = new File(new File(realpath ), fileName);
if (!savefile.getParentFile().exists()){
savefile.getParentFile().mkdirs();
FileUtils.copyFile(image, savefile);
}else{
FileUtils.copyFile(image, savefile);
}
ActionContext.getContext().put("message", "文件上传成功");
OutPutMessa(0);//保存成功
return null;
}
return "success";
}
显示图片内容只需要在
src 中放图片路径即可
上一篇 
