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

一、图片上传

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

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

1. 图片绑定事件，使用change()事件，值改变事件
2. 图片传到服务器，表单数据序列化new FormDta()，需要有表单，用form标签将对应的控件包起来，要想识别到，要加name属性

   <span>封面图</span>
   <form class="imgbox"><input type="file" class="file" name="file">
   </form>
   

3. 用jquery找到的元素时为JDom元素，要转成Dom元素，后加[]

   var msg = new FormData($(".imgbox")[0])
   

4. 使用get()方法，获取控件值file
5. 发起请求
6. 设置上传的数据类型
7. 上传过程中的设置，由于上传过程会拼接成字符串，不需要设置为false

//图片上传
$(".file").change(function(){//表单数据序列化var msg = new FormData($(".imgbox")[0])if(msg.get("file").name){$.ajax({url:"upload",type:"post",data:msg,contentType:false,//上传的数据类型，默认值是trueprocessData:false,//上传过程中的设置，默认值是truesuccess: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("")}

（三）添加

1. 由于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,//上传的数据类型，默认值是trueprocessData:false,//上传过程中的设置，默认值是truesuccess: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()}
       })
       

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

//添加
$(".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"}})
})

3. 后端接受参数，修改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+")";

（四）涉及到的知识点

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

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

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

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

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

1. 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>

2. 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,//上传的数据类型，默认值是trueprocessData:false,//上传过程中的设置，默认值是truesuccess: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()}
})

3. 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);})}
})

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

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

5. 后端UpdateServlet.java接受imgurl

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