java怎样实现图片的预览功能

2025-10-17 15:59:55

1、第一步、使用鼠标点击打开Eclipse软件,如图所示:

java怎样实现图片的预览功能

2、第二步、然后点击菜单栏File-->New--->Dynamic Web Project,如图所示:

java怎样实现图片的预览功能

3、第三步、然后输入项目名称,点击Next按钮,如图所示:

java怎样实现图片的预览功能

4、第四步、继续点击Next按钮,如图所示:

java怎样实现图片的预览功能

5、第五步、勾选Generate web.xml deployment descriptor,然后点击Finish按钮,如图所示:

java怎样实现图片的预览功能

6、第六步、项目创建成功之后,鼠标选中WebContent右键New-->JSP File,如图所示:

java怎样实现图片的预览功能

7、第七步、然后输入JSP File文件名,点击Finish按钮,如图所示:

java怎样实现图片的预览功能

8、第八步、然后在jsp文件中键入完整代码:

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>java怎样实现图片的预览功能?</title>

<script type="text/javascript">

    function imgPreview(fileDom){

        //判断是否支持FileReader

        if (window.FileReader) {

            var reader = new FileReader();

        } else {

            alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");

        }

        //获取文件

        var file = fileDom.files[0];

        var imageType = /^image\//;

        //是否是图片

        if (!imageType.test(file.type)) {

            alert("请选择图片!");

            return;

        }

        //读取完成

        reader.onload = function(e) {

            //获取图片dom

            var img = document.getElementById("preview");

            //图片路径设置为读取的图片

            img.src = e.target.result;

        };

//https://blog.csdn.net/baidu_41601048/article/details/78997497

        reader.readAsDataURL(file);

    }

</script>

</head>

<body>

 <img id="preview" />

    <br />

    <input type="file" name="file" onchange="imgPreview(this)" />

</body>

</html>

java怎样实现图片的预览功能

9、第九步、然后启动部署项目到Tomcat服务器,如图所示:

java怎样实现图片的预览功能

10、第十步、在浏览器中输入访问项目地址:http://localhost:8080/Demo/index.jsp

然后点击选择文件按钮,如图所示:

java怎样实现图片的预览功能

11、第十一步、然后选中需要预览的图片,点击打开按钮,如图所示:

java怎样实现图片的预览功能

12、第十二步、图片预览效果,如图所示:

java怎样实现图片的预览功能

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢