图书商城_day2中遇到的难题

奋斗的龙猫

已于 2022-05-04 23:13:42 修改

阅读量226

点赞数

分类专栏： javaweb 文章标签： web

于 2022-05-04 22:46:37 首次发布

本文链接：https://blog.csdn.net/weixin_46544385/article/details/124579428

版权

javaweb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

修改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>

奋斗的龙猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图书商城_day2中遇到的难题

这个通常是因为标签对象为null所导致的，就好像我们的java中，假设对象A,想要调用它的方法display()，那么应该是先实例化A，然后再去调用方法display,否则如果对象A为null，那么就会发生报错。而这里发生这样的错误是同样的道理，如果我们获取到的标签为null,那么这时候设置它的属性，或者设置触发事件的时候就会发生报错了。所以这时候我们通常需要来检查一下我们获取到的标签对象是否为null，可以通过alert(xxx==null)来进行判断是否为null，如果是true，可以看一下getEl
复制链接

扫一扫

专栏目录