效果：
代码
<!DOCTYPE html><html><head><title>图片上传</title><meta charset="utf-8"><style type="text/css">.show-place{width: 600px;height: 50px;position: relative;}.btn-upload{float: left;display: block;width: 100px;height: 100px;border: 1px solid #ddd;background: #ebebeb;line-height: 100px;font-size: 14px;text-align: center;color: #808080;}.show-place img{float: left;width: 100px;height: 100px;margin-right: 10px;}</style></head><body><form><div class="show-place"><label for="btn-upload" class="btn-upload">点击上传</label><input type="file" name="imgs" οnchange="previewImg(this);" style="display: none;" id="btn-upload"></div></form></body></html><!--<script type="text/javascript" src="jquery-2.2.1.min.js"></script>--><script type="text/javascript">function previewImg(fileElement) {var showPlace =document.getElementsByClassName("show-place")[0];//FileReaderif(window.FileReader){//验证当前的浏览器是否支持图片预览var reader=new FileReader();var file=fileElement.files[0];var regexImage=/^image\//;//匹配是否拥有image,确保上传的文件是图片if(regexImage.test(file.type)){//设置读取结束的回调函数reader.οnlοad=function(){ShowImg(showPlace,this);};//开始读取上传的文件内容reader.readAsDataURL(file);}else{return false;}}else{console.log("亲，浏览器该升级了,不支持图片预览~");return false;}}//显示添加的图片function ShowImg(showPlace,self){var btnElement=document.getElementsByClassName("btn-upload")[0];var imgElement=document.createElement("img");imgElement.src=self.result;showPlace.insertBefore(imgElement,btnElement);}</script>
