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

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

1、html页面

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

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页面,添加一个按钮。

<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>

 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]);
    });
});