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

2024-05-30 07:28| 来源: 网络整理| 查看: 265

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

1、html页面

// 用于接受上传的图片 // 用于上传文件

2、css文件

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

3、js文件，使用FileReader()获取上传的图片的路径

/* * 点击图片，上传新图片 * */ $(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]); }); });

同理：

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

1、html页面,添加一个按钮。

// 用于接受上传的图片上传文件 // 用于上传文件

2、css文件

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

3、js文件，使用FileReader()获取上传的图片的路径

/* * 点击按钮，上传新图片 * */ $(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]); }); });

【本文地址】

公司简介

联系我们