js 点击按钮或者图片，实现图片上传并显示在页面上

最新推荐文章于 2024-04-26 16:47:03 发布

柠檬蟹

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量2.2k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43724569/article/details/126025615

版权

点击图片本身，实现图片上传：

<div class="card">
	//	用于接受上传的图片
	<img src="img.jpg"  alt="" id="picture">
	// 用于上传文件
	<input class="file-upload" type="file" accept="image/*" name="picture"/>
</div>

.file-upload { 
   display: none; // 设置上传文件的input隐藏
}


/*
* 点击图片，上传新图片
* */
$(document).on("click", "#picture", function () {
    // 点击图片的同时，点击上传文件的input
    $('.file-upload').click();
	// 将上传的图片显示到页面上
    $(document).on("change", ".file-upload", function () {
        var fileObj = $(".file-upload")[0];
        var img = document.getElementById('picture'); //获得用户上传的图片节点
        var reader = new FileReader();
        // 转换成功后的操作，img.src即为转换后的DataURL
        reader.onload = function(e) {
            if (reader.readyState === 2) { //加载完毕后赋值
                img.src = e.target.result;
                console.log(img.src);
            }
        }
        reader.readAsDataURL(fileObj.files[0]);
    });
});

点击按钮，实现图片上传：


<div class="card">
	//	用于接受上传的图片
	<img src="img.jpg"  alt="" id="picture">
    <button type="button" class="btn btn-primary" id="btn" >上传文件</button>
	// 用于上传文件
	<input class="file-upload" type="file" accept="image/*" name="picture"/>
</div>

CSS同理

/*
* 点击按钮，上传新图片
* */
$(document).on("click", "#btn", function () {
    // 点击图片的同时，点击上传文件的input
    $('.file-upload').click();
	// 将上传的图片显示到页面上
    $(document).on("change", ".file-upload", function () {
        var fileObj = $(".file-upload")[0];
        var img = document.getElementById('picture'); //获得用户上传的图片节点
        var reader = new FileReader();
        // 转换成功后的操作，img.src即为转换后的DataURL
        reader.onload = function(e) {
            if (reader.readyState === 2) { //加载完毕后赋值
                img.src = e.target.result;
                console.log(img.src);
            }
        }
        reader.readAsDataURL(fileObj.files[0]);
    });
});