博客

jq添加＜img＞点击事件调用上传图片方法并回显图片

  • Post author:
  • Post category:其他




效果图

在这里插入图片描述



1.html添加如下元素

<img src="https://img1.baidu.com/it/u=1983462487,1113805563&fm=26&fmt=auto" alt="" width="80" id="logoImg" onclick="imgChange()">
<input type="file" style="width: 305px;display: none" name="logoPicUrl" multiple="multiple" id="logoPicUrl" autocomplete="off" 
accept="image/x-png,image/gif,image/jpeg,image/bmp">



2.js添加如下方法

/**
 * 点击图片事件
 */
function imgChange() {
    $('#logoPicUrl').click();
    $("#logoPicUrl").unbind().change(function(e) {
        if ($('#logoPicUrl').val() == '') {
            return;
        }
        changeImg(e,$(this).val());
    });
}

/**
 * 改变图片
 */
function changeImg(e,filePath) {
    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
    //检查后缀名
    if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
        showError('文件格式必须为：png/jpg/jpeg');
        return;
    }
    //获取并记录图片的base64编码
    var reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onloadend = function() {
        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
        var dataURL = reader.result;
        console.log(dataURL)
        // 显示图片
        $("#logoImg").attr('src',dataURL);
    };
}



完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击图片上传并回显</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<style>
		
	</style>
</head>

<body>
	<img src="https://img1.baidu.com/it/u=1983462487,1113805563&fm=26&fmt=auto" alt="" width="80" id="logoImg" onclick="imgChange()">
	<input type="file" style="width: 305px;display: none" name="logoPicUrl" multiple="multiple" id="logoPicUrl" autocomplete="off" 
	accept="image/x-png,image/gif,image/jpeg,image/bmp">
</body>
<script>
/**
 * 点击图片事件
 */
function imgChange() {
    $('#logoPicUrl').click();
    $("#logoPicUrl").unbind().change(function(e) {
        if ($('#logoPicUrl').val() == '') {
            return;
        }
        changeImg(e,$(this).val());
    });
}

/**
 * 改变图片
 */
function changeImg(e,filePath) {
    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
    //检查后缀名
    if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
        showError('文件格式必须为：png/jpg/jpeg');
        return;
    }
    //获取并记录图片的base64编码
    var reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onloadend = function() {
        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
        var dataURL = reader.result;
        console.log(dataURL)
        // 显示图片
        $("#logoImg").attr('src',dataURL);
    };
}

</script>
</html>


版权声明：本文为weixin_42402326原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。