html选择图片后直接预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(".file").change(function(){ var fileImg = $(".fileImg"); var explorer = navigator.userAgent; var imgSrc = $(this)[0].value; if (explorer.indexOf('MSIE') >= 0) { if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) { imgSrc = ""; fileImg.attr("src","/img/default.png"); return false; }else{ fileImg.attr("src",imgSrc); } }else{ if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(imgSrc)) { imgSrc = ""; fileImg.attr("src","/img/default.png"); return false; }else{ var file = $(this)[0].files[0]; var url = URL.createObjectURL(file); fileImg.attr("src",url); } } }) }) </script> </head> <body> <form enctype="multipart/form-date" method="post"> <input type="file" class="file"> <input type="submit" class="sub"> </form> <img src="" class="fileImg"> </body> </html>
既然我已经踏上这条道路,那么,任何东西都不应妨碍我沿着这条路走下去!!!!!!!!!! !!! ! !! !
个人公众号《后端技术开发之路》,欢迎您关注!
如果您觉得我写还不过,请打赏下在下吧!【高木子】!