javascript - 如何使用javascript动态更改jsp页面上的图标？

Question

我有一个 jsp 页面，我在其中显示保存在文件夹中的文件。文件名存储在数据库中，我只是获取并显示到网页上。现在我希望每个文件都有一个基于其扩展名的图标，这就是为什么我下载了所有不同文件类型的图标，但我的代码似乎不起作用。

我在浏览器的控制台中收到这些错误:

Uncaught ReferenceError: fileIcon is not defined at HTMLImageElement.onload
Uncaught SyntaxError: Invalid or unexpected token 
Uncaught SyntaxError: missing ) after argument list

folder.jsp (这是显示图标、文件名、创建日期和操作的网页)

<table class="list-view">
    <tr>
        <th></th>
        <th>File</th>
        <th>Created Date</th>
        <th>Actions</th>
    </tr>
    <c:forEach var="j" items="${files}">
        <tr>
            <td><img src="resources/images/icons/file.svg" class="file-icon" id="file-icon" onload="fileIcon(${j.getFile()})"></td>
            <td id="filename">${j.getFile()}</td>
            <td>${j.getCreateddate()}</td>
            <td>
                <a onclick="renameFileModal(${j.getFileid()})" class="rename"><img src="resources/images/icons/rename.svg" class="rename-icon"></a>
                <a onclick="deleteFileModal(${j.getFileid()})" class="delete"><img src="resources/images/icons/delete-file.svg" class="delete-icon"></a>
                <a href="" class="download" download="${j.getFilename()}"><img src="resources/images/icons/download.svg" class="download-icon"></a>
            </td>
        </tr>           
    </c:forEach>
</table>

ma​​in.js

function fileIcon(filename) {
    var extension = filename.substring(filename.indexOf("."), filename.length);

    if (extension == ".txt") {
        document.getElementById("file-icon").setAttribute("src", "resources/images/icons/txt.svg");
    }

    if (extension == ".pdf") {
        document.getElementById("file-icon").setAttribute("src", "resources/images/icons/pdf.svg");
    }

    if (extension == ".jpeg") {
        document.getElementById("file-icon").setAttribute("src", "resources/images/icons/jpeg.svg");
    }

    if (extension == ".jpg") {
        document.getElementById("file-icon").setAttribute("src", "resources/images/icons/jpg.svg");
    }

    if (extension == ".png") {
        document.getElementById("file-icon").setAttribute("src", "resources/images/icons/png.svg");
    }

    if (extension == ".gif") {
        document.getElementById("file-icon").setAttribute("src", "resources/images/icons/gif.svg");
    }
}

我放置这些 if 语句来检查这是否会给我想要的结果，因为这些文件存在于文件夹中，但它不起作用。我应该做哪些更改才能更改图标？如果我可以使用另一种方法，请告诉我，我也会尝试一下。

Answer 1

我想通了。我没有使用 JavaScript，而是在我的 POJO 类 Files

中定义了 extension 和 icon 变量

在我的 DAO 类 FileSharingDao 中，我定义了两个方法 public String extractExtension(String filename) 和 public String getIcon(String extension) .前一种方法使我能够从文件名中获取扩展名，而后者的工作方式如下:

public String getIcon(String extension) {
        String icon;

        System.out.println(extension);

        switch (extension) {
                // cases go here
                case ".css":
                    icon = "css.svg";
                    break;
        }
        return icon;
}

此函数是从我的 DAO 类中的 getFiles() 方法调用的。

public ArrayList<Files> getFiles(int folderid, int userid) throws SQLException, ClassNotFoundException {
    ArrayList<Files> fileList = new ArrayList<Files>();

    PreparedStatement preparedStatement = DatabaseConnection.getDatabase().getConnection()
            .prepareStatement(GET_FILES_QUERY);
    preparedStatement.setInt(1, folderid);
    preparedStatement.setInt(2, userid);
    ResultSet resultSet = preparedStatement.executeQuery();

    while (resultSet.next()) {
        Files file = new Files();
        file.setFileid(resultSet.getInt("id"));
        file.setFolderid(resultSet.getInt("folderid"));
        file.setFilename(resultSet.getString("filename"));
        file.setCreateddate(convertDate(resultSet.getString("createddate")));
        file.setFile(resultSet.getString("file"));
        file.setLastmodified(convertDate(resultSet.getString("lastmodified")));
        file.setExtension(extractExtension(resultSet.getString("file")));
        file.setIcon(getIcon(extractExtension(resultSet.getString("file"))));
        file.setUserid(userid);

        fileList.add(file);
    }

    close(preparedStatement, resultSet);

    return fileList;
}

在我的 Controller 中，我使用此方法调用 getFiles():

@RequestMapping("/folder")
public ModelAndView folder(HttpServletRequest request) {
    int folderid = Integer.parseInt(request.getParameter("folderid"));
    int userid = (Integer) request.getSession().getAttribute("userid");
    request.getSession().setAttribute("folderid", folderid);

    ArrayList<Files> files;

    FileSharingDao fileShare = new FileSharingDao();
    try {
        files = fileShare.getFiles(folderid, userid);
        request.setAttribute("files", files);
    } catch (Exception e) {
        e.printStackTrace();
    }

    return new ModelAndView("folder");
}

然后我像这样在我的 jsp 页面上访问 文件:

<c:forEach var="j" items="${files}">
    <tr>
        <td>
            <img src="resources/images/icons/${j.getIcon()}" class="file-icon" id="file-icon">
        </td>
        <td>${j.getFile()}</td>
        <td>${j.getLastmodified()}</td>
        <td>
            <a onclick="renameFileModal(${j.getFileid()})" class="rename">
                <img src="resources/images/icons/rename.svg" class="rename-icon">
            </a>

            <a onclick="deleteFileModal(${j.getFileid()})" class="delete">
                <img src="resources/images/icons/delete.svg" class="delete-icon">
            </a>

            <a href="" class="download" download="${j.getFilename()}"> 
                <img src="resources/images/icons/download.svg" class="download-icon">
                </a>
                <a>
                    <img src="resources/images/icons/share.svg" class="share-icon">
                </a>
        </td>
    </tr>           
</c:forEach>

这就做到了。问题解决了。