<!doctype html> <html> <head> <meta charset="utf-8"> <title>html 上传图片本地预览</title> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> .file_scan { text-align: center; width: 80px; height: 30px; background: #EBD9DB; outline: none; text-decoration: none; line-height: 30px; cursor: pointer; } </style> </head> <body> <div> <input type="file" id="qiniuPic" style="display: none;" name="qiniuPic" accept="image/*"> <div class="file_scan" style="width: 100px;float: left; margin-top: 20px;" onclick="photo_add()"> 添加浏览 </div> <div style="clear: left;"> <img style="width: 270px;height: 135px;border-radius: 5px" id="img" src="https://www.jq22.com/img/cs/500x500-1.png" alt=""> </div> </div> <script> function photo_add() { var input_file = $("#qiniuPic"); input_file.click(); } $("#qiniuPic").change(function() { console.log($(this)[0].files[0], '38') console.log(URL.createObjectURL($(this)[0].files[0]), '39') $("#img").attr("src", URL.createObjectURL($(this)[0].files[0])); }); </script> </body> </html>
