点击图片本身，实现图片上传：
<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即为转换后的DataURLreader.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即为转换后的DataURLreader.onload = function(e) {if (reader.readyState === 2) {//加载完毕后赋值img.src = e.target.result;console.log(img.src);}}reader.readAsDataURL(fileObj.files[0]);});});
