java上传图片并且预览

最新推荐文章于 2024-08-07 11:49:14 发布

sfqqyq

最新推荐文章于 2024-08-07 11:49:14 发布

阅读量460

点赞数

本文链接：https://blog.csdn.net/qq_34917117/article/details/106852506

版权

在上一些网站时我们需要提交图片或者一些证件图片方便用户查看是否上传错误，或者看看效果，比如在QQ上上传头像，在一些官方网站需要上传照片文件审核。

前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {
    //alert("nihao1");
    $("#picture").change(function() {
        var current_pic=this.files[0];
        //alert("current_pic="+current_pic);
        preview_picture(current_pic);
    });
    
});

function preview_picture(pic) {
    //alert("你好！");
    var r=new FileReader();
    r.readAsDataURL(pic);
    r.onload=function (){
        //alert("你好123！");
        $(".content > div > img").attr("src",this.result).show();
        //alert("你好321！");
    };
    
}

</script>

</head>
<body>
<div class="content">
    <div>
        上传图片：<input class="btn btn-danger" id="picture" type="file" >
    </div>  
    <div>
        <img src="" >
    </div>
    
    
</div>
</body>
</html>

需要引入

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

在程序启动时需要加载

$(document).ready(function() {
    //alert("nihao1");
    $("#picture").change(function() {
        var current_pic=this.files[0];
        //alert("current_pic="+current_pic);
        preview_picture(current_pic);
    });
    
});

在其中需要实现方法

function preview_picture(pic) {
    //alert("你好！");
    var r=new FileReader();
    r.readAsDataURL(pic);
    r.onload=function (){
        //alert("你好123！");
        $(".content > div > img").attr("src",this.result).show();
        //alert("你好321！");
    };
}

显示效果

sfqqyq

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
java上传图片并且预览

在上一些网站时我们需要提交图片或者一些证件图片方便用户查看是否上传错误，或者看看效果，比如在QQ上上传头像，在一些官方网站需要上传照片文件审核。前端代码<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLI...
复制链接

扫一扫