Java Web项目后台管理系统之内容管理仿写（三）：图片上传

原创已于 2025-10-25 10:25:57 修改 · 809 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #开发语言

于 2025-09-01 20:18:19 首次发布

java 专栏收录该内容

5 篇文章

订阅专栏

一、图片上传

需要准备两个jar包起效果：commons.io-2.4.jar和commons.fileupload-1.3.1.jar。
由于之前富文本编译器的操作，已经加入了这两个jar包。

（一）前端发起请求并回调函数

图片绑定事件，使用change()事件，值改变事件
图片传到服务器，表单数据序列化new FormDta()，需要有表单，用form标签将对应的控件包起来，要想识别到，要加name属性
```
<span>封面图</span>
<form class="imgbox">
	<input type="file" class="file" name="file">
</form>
```
用jquery找到的元素时为JDom元素，要转成Dom元素，后加[]
```
var msg = new FormData($(".imgbox")[0])
```
使用get()方法，获取控件值file
发起请求
设置上传的数据类型
上传过程中的设置，由于上传过程会拼接成字符串，不需要设置为false

//图片上传
$(".file").change(function(){
	//表单数据序列化
	var msg = new FormData($(".imgbox")[0])
	if(msg.get("file").name){
		$.ajax({
			url:"upload",
			type:"post",
			data:msg,
			contentType:false,//上传的数据类型，默认值是true
			processData:false,//上传过程中的设置，默认值是true
			success:function(value){
				console.log(value)
			}
		})
	}
})

（二）辅助功能：缩略图

1. add.html文件中添加代码

<div class="show"></div>

2. 添加图片样式

$(".show").html("<img src='upload/"+value.imgurl+"' style='width:120px;height:100px;object-fil:cover'>")

3. 如果图片不要，缩略图页去掉

else{
		$(".show").html("")
	}

（三）添加

由于imgurl是在缩略图中添加的元素，使用这个元素有两种方法

将imgurl设置为全局变量

使用隐藏域

add.html添加隐藏域代码

<span>封面图</span>
<form class="imgbox">
	<input type="file" class="file" name="file">
	<input type="hidden" class="imgurl"><!-- 隐藏域 -->
</form>
<div class="show"></div>

add.js代码修改

//图片上传
$(".file").change(function(){
	//表单数据序列化
	var msg = new FormData($(".imgbox")[0])
	if(msg.get("file").name){
		$.ajax({
			url:"upload",
			type:"post",
			data:msg,
			contentType:false,//上传的数据类型，默认值是true
			processData:false,//上传过程中的设置，默认值是true
			success:function(value){
				console.log(value)
				//缩略图
				$(".show").html("<img src='upload/"+value.imgurl+"' style='width:120px;height:100px;object-fil:cover'>")
				//隐藏域
				$(".imgurl").val(value.imgurl)
			}
		})
	}else{
		$(".show").html("")
		$(".imgurl").val()
	}
})

在添加部分的代码加入添加图片的代码，从隐藏域中获取值

//添加
$(".add").click(function(){
	//获取参数
	var channelid = $(".channelid").val()
	var title = $(".title").val()
	var author = $(".author").val()
	var createtime = $(".createtime").val()
	//var content = $(".content").val()
	var content = ue.getContent()
	//从隐藏域中获取值
	var imgurl = $(".imgurl").val()
	$.ajax({
		url:"AddContent",
		type:"post",
		data:{
			channelid,
			title,
			author,
			createtime,
			content,
			imgurl
		},
		success:function(value){
			alert(value)
			location.href="content.html"
		}
	})
})

后端接受参数，修改AddContent.java文件

String imgurl = request.getParameter("imgurl");
		
String sql = "insert into content(title,createtime,author,imgurl,content,channelid) value(\""+title+"\",\""+createtime+"\",\""+author+"\",\""+imgurl+"\",\""+content+"\","+channelid+")";

（四）涉及到的知识点

change()：值改变事件
new FormData()：表单数据序列化，JavaScript原生方法

二、查找中图片代码进行修改

检查SearchContent.java文件是否有返回imgurl字段
修改conent.js中加载数据中imgurl对应的代码

'<td><img src="upload/'+arr[i].imgurl+'" style="width:120px;height:100px;object-fil:cover"></td>'+

三、修改中图片代码进行修改

update.html中添加封面图代码

<div class="item">
    <span>封面图</span>
    <form class="imgbox">
    	<input type="file" class="file" name="file">
    	<input type="hidden" class="imgurl"><!-- 隐藏域 -->
    </form>
    <div class="show"></div>
</div>

update.js中添加图片上传代码

//图片上传
$(".file").change(function(){
	//表单数据序列化
	var msg = new FormData($(".imgbox")[0])
	if(msg.get("file").name){
		$.ajax({
			url:"upload",
			type:"post",
			data:msg,
			contentType:false,//上传的数据类型，默认值是true
			processData:false,//上传过程中的设置，默认值是true
			success:function(value){
				console.log(value)
				//缩略图
				$(".show").html("<img src='upload/"+value.imgurl+"' style='width:120px;height:100px;object-fil:cover'>")
				//隐藏域
				$(".imgurl").val(value.imgurl)
			}
		})
	}else{
		$(".show").html("")
		$(".imgurl").val()
	}
})

update.js中回显中给隐藏域赋值

//回显
$.ajax({
	url:"SearchContent",
	type:"get",
	data:{
		id
	},
	success:function(value){
		var obj = value.data[0]
		$(".channelid").val(obj.channelid)
		$(".title").val(obj.title)
		$(".author").val(obj.author)
		$(".createtime").val(obj.createtime)
		//$(".content").val(obj.content)
		//缩略图
		$(".show").html("<img src='upload/"+obj.imgurl+"' style='width:120px;height:100px;object-fil:cover'>")
		//隐藏域
		$(".imgurl").val(obj.imgurl)
	
		ue.ready(function(){
			//设置编译器的内容
			ue.setContent(obj.content);
		})
	}
})

update.js中修改中添加imgurl字段，正常传参

var imgurl = $(".imgurl").val()

后端UpdateServlet.java接受imgurl

String imgurl = request.getParameter("imgurl");