效果如下：
方法：
添加图片使用了<input>标签，将标签的type设置为file就可以点击打开文件夹添加文件了。
<input id="atlas_photo" type="file">
当前在页面表现为一个输入栏
如果不想要输入栏可以将其隐藏：将其display设置为none，并使用图片元素代替点击。相当于给点击选择文件换一种展现形式。
display:none;
添加一个图片表示点击该图片添加文件，然后给图片元素添加点击事件：点击触发input的点击事件：
<img id="atlas-img" class="atlas" src="img/add.png" onclick="openFile()">
openFile()函数用于触发input的点击：
function openFile() { document.getElementById(atlas_photo).click(); }
也就是说，点击图片是为了点击输入框，点击图片导致了输入框的点击。
现在就完成了点击图片选择文件这一步了。接下来是将选择的文件显示出来，达成图片的预览效果。
这里使用jQuery中的prop()方法获取输入框中的数据值，然后使用FileReader()将图片信息读取为URL
prop() 方法设置或返回被选元素的属性和值。
FileReader()的readASDataURL()将文件读取为一段以data:开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里就将图片转化成了base64格式。
*FileReader()方法参考：https://www.cnblogs.com/LO-gin/p/6817319.html
然后用输入框获取到的图片的base64代替当前图片的地址。
function viewImage() { var file = $("#atlas_photo").prop(‘files‘)[0]; if (file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function (even) { $(‘#atlas-img‘).attr("src", even.currentTarget.result); } } }
这样就实现了图片的预览。
注意：当点击输入框但不选择任何文件时输入框内的内容将为空，但是预览的图片因为没有改变地址因此仍显示之前的图片，给人一种没有更换信息的错觉，如果没有将之前的文件信息保存的话在上传时就会出现错误。为了避免这个情况，可以使用中间变量保存之前的文件信息，如果当前操作没有选择任何文件的话就将之前的信息进行上传。
完成代码：
HTML
<div id="atlasBox"> <img id="atlas-img" class="atlas" src="img/add.png" onclick="openFile(‘atlas_photo‘)"> <input id="atlas_photo" type="file" onchange="viewImage(‘atlas-img‘)"> </div>
JavaScript
var photoId; function openFile(e) { photoId=e; document.getElementById(photoId).click(); } function viewImage(e) { var file = $("#"+photoId).prop(‘files‘)[0]; if (file) { // image = file; //用于确定信息时确保是否已上传图片 var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function (even) { $(‘#‘+e).attr("src", even.currentTarget.result); addBox(e); } } }
这里调用点击等方法时添加了参数，用于传递id。因为项目中还有其他文件选择栏，为了复用方法，就添加了参数。不需要的也可以不传参。
CSS
#atlas_photo{ display: none; } .atlas{ width:130px; height:130px; border: 1px solid gray; margin: 0 5px; }
原文：https://www.cnblogs.com/cff2121/p/10981633.html