<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片上传预览</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //点击图片触发input $(document).ready(function () { $("#preview").click(function () { $(".up").click(); }); }); //预览本地图片 function imgPreview(fileDom) { //判断是否支持FileReader if (window.FileReader) { var reader = new FileReader(); } else { alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!"); } //获取文件 var file = fileDom.files[0]; var imageType = /^image\//; //是否是图片 if (!imageType.test(file.type)) { alert("请选择图片!"); return; } //读取完成 reader.onload = function (e) { //获取图片dom var img = document.getElementById("preview"); //图片路径设置为读取的图片 img.src = e.target.result; }; reader.readAsDataURL(file); } </script> </head> <body> <img id="preview" style="width: 500px;height: 500px" src="up.png"/> <br/> <style> .up { display: none; } </style> <input class="up" type="file" name="file" οnchange="imgPreview(this)"/> </body> </html>