文章目录
修改img的图片
如果我们需要修改img的图片，只需要修改img中的src属性的值即可，那么基本步骤为:
- 分别设置两个标签img,以及选择文件，即如下所示:
<html>
<head>
<title>编辑图书界面</title>
</head>
<body>
<div id="main">
<div id="right">
<form id="form1" action="/AdminServlet" enctype="multipart/form-data" method="post">
图书图片: <img src="原来图片的路径" id="img_id">
<input type="file" name="image" id="file_id"><br>
</form>
</div>
</div>
</body>
</html>
- 因为是修改图片，那么我们需要设置选择文件是隐藏不可见的,所以我们还需要给id为file_id标签添加hidden属性。即
<input hidden type="file" name="image" id="file_id"> - 上面的准备工作完毕之后，这时候我们将来给标签添加事件:当我们双击了img这个图片，那么这时候就会触发id为file_id的点击事件，从而开始进行选择文件.当我们选择好文件之后，就会触发它的change事件，这时候我们需要利用FileReader来进行读取文件，然后将读取到的文件内容赋给img中的src的属性，即可实现更新图片。完整的代码如下所示:
<html>
<head>
<title>编辑图书界面</title>
</head>
<body>
<div id="main">
<div id="right">
<form id="form1" action="/AdminServlet" enctype="multipart/form-data" method="post">
图书图片: <img src="原来图片的路径" id="img_id">
<input type="file" name="image" id="file_id"><br>
</form>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="<c:url value='/ajax.js'></c:url>"></script>
<script type="text/javascript">
var img = document.getElementById("img_id"); //注意这里获取的标签对象的id不要写错了，否则就会发生下面提到的错误"Cannot set properties of null (setting ‘xxx‘)"
var file_id = document.getElementById("file_id");
var reader = new FileReader();
reader.onload = function(event){
img.src = event.target.result;//更改img标签的图片
}
file_id.onchange = function(){
//打开文件选择框，这时候我们获取选择的文件
var file = file_id.files[0];//注意这里只需要获取files[0]即可，而不是file_id.get(0).files[0]
reader.readAsDataURL(file);//读取文件的url，然后将执行onload事件
}
img.ondblclick = function(){
//如果双击图片，那么就触发事件,点击选择上传文件，所以触发的是file_id的click事件
var file_id = document.getElementById("file_id");
alert(file_id == null);
file_id.click();
}
}
</script>
设置某一个标签的值或者触发事件是，发生报错Cannot set properties of null (setting ‘xxx‘)
这个通常是因为标签对象为null所导致的，就好像我们的java中，假设对象A,想要调用它的方法display()，那么应该是先实例化A，然后再去调用方法display,否则如果对象A为null，那么就会发生报错。而这里发生这样的错误是同样的道理，如果我们获取到的标签为null,那么这时候设置它的属性，或者设置触发事件的时候就会发生报错了。
所以这时候我们通常需要来检查一下我们获取到的标签对象是否为null，可以通过alert(xxx==null)来进行判断是否为null，如果是true，可以看一下getElementById(“xxx”)的值和我们定义的标签中的是否一致即可，如果为false，那么说明标签对象不为null，此时可以寻找别的错误地方，目前我是因为这个地方导致的错误😭😭😭
如果img也是form表单中的数据，如何进行重置？
我们都知道再html中，存在着<input type=“reset”>的重置按钮，但是经过实验之后发现，仅仅能够重置<input >标签的值，但是并不能重置例如<img>标签的值,那么这时候我们虽然可以直接定义一个button，然后给这个button添加一个点击事件来实现重置(需要我们获取表单中的每一个子标签进行重置，显然很麻烦），这里有一个相对前者更加简便的方法来实现，就是我们给form标签添加一个id="form"的属性，当我们点击重置按钮button(这里的重置按钮依旧是一个普通的按钮),然后再这个方法中，我们首先获取到reset按钮不可以重置的标签，然后进行重置，然后如果是<input>标签的话，我们可以根据id来获取form标签，然后调用reset方法即可。代码如下所示:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>编辑图书界面</title>
<style type="text/css">
#top{
height: 100px;
width: 100%;
background-color: lightgreen;
}
#main{
height: 580px;
width: 100%;
}
#left{
width: 120px;
height: 580px;
float: left;
}
#right{
width: 90%;
height: 580px;
background-image: url("<c:url value='/images/book.jpg'></c:url>");
position: absolute;
left: 120px;
}
div{
border: 1px solid black;
}
img{
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<div id="top">
<c:choose>
<c:when test="${not empty sessionScope.user}">
<span>您好，管理员 ${sessionScope.user}</span>
<a href="<c:url value="/AdminServlet?method=logout"></c:url>">退出登录</a>
</c:when>
<c:otherwise>
<a href="<c:url value='/jsps/admin/login.jsp'></c:url>">登录</a>
<a href="<c:url value='/jsps/admin/register.jsp'></c:url>">注册</a>
</c:otherwise>
</c:choose>
</div>
<div id="main">
<div id="left">
<a>添加分类</a><br>
<a>查询分类</a><br>
<a href="<c:url value='/jsps/admin/addBook.jsp'></c:url>">添加图书</a><br>
<a href="<c:url value='/AdminServlet?method=query'></c:url>">查询图书</a><br>
</div>
<div id="right">
<c:if test="${not empty requestScope.msg}">
<span style="color: red;">${requestScope.msg}</span>
</c:if>
<form id="form1" action="/AdminServlet" enctype="multipart/form-data" method="post">
<input type="hidden" name="method" value="updateById">
<input type="hidden" name="id" value="${book.id}">
图书图片: <img src="<c:url value='/images/${book.name}.png'></c:url>" id="img_id">
<input hidden type="file" name="image" id="file_id"><br>
图书名字: <input type="text" id="name" name="name" value="${book.name}"><br>
图书价格: <input type="text" id="price" name="price" value="${book.price}"><br>
图书分类: <select name="catagory_id" id="select">
<option value="0">===请选择分类===</option>
</select><br>
<input type="submit" value="提交">
<input type="button" style="margin-left: 10px;" value="重置" id="button">
</form>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="<c:url value='/ajax.js'></c:url>"></script>
<script type="text/javascript">
//当页面加载完毕之后，那么图书分类中的下拉框需要显示分类了
window.onload = function(){
//获取下拉框
var select = document.getElementById("select");
request({
method: "POST",
resource: "/AdminServlet",
params: "method=getCatagories",
returnType: "json",
callback: function(data){
//清空下拉框的所有数据
select.innerHTML = "";
//生成子标签
var option = document.createElement("option");
option.innerHTML = "===请选择分类===";
select.appendChild(option);
//生成对应的子标签
for(var i = 0; i < data.length; ++i){
option = document.createElement("option");
option.value = data[i].id;
option.selected = option.value == ${book.id};
var text = document.createTextNode(data[i].name);
option.appendChild(text);
select.appendChild(option);
}
}
})
var img = document.getElementById("img_id");
var file_id = document.getElementById("file_id");
var reader = new FileReader();
reader.onload = function(event){
img.src = event.target.result;//更改img标签的图片
}
file_id.onchange = function(){
//打开文件选择框，这时候我们获取选择的文件
var file = file_id.files[0];
reader.readAsDataURL(file);//读取文件的url，然后将执行onload事件
}
img.ondblclick = function(){
//如果双击图片，那么就触发事件,点击选择上传文件，所以触发的是file_id的click事件
var file_id = document.getElementById("file_id");
alert(file_id == null);
file_id.click();
}
var button = document.getElementById("button");
button.onclick = function(){
document.getElementById("img_id").src = "<c:url value='/images/${book.name}.png'></c:url>"; //获取img标签，进行重置,否则直接依靠下一步的话没有办法实现重置
document.getElementById("form1").reset();//获取form标签，调用reset方法来重置input标签
}
}
</script>
