HTML5+JS实现简单的图片上传预览_html-js-css

概述直接上代码 ↓ 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5 图片上传预览</title> 6 <style> 7 #preview { 8 width: 300px; 9 height: 300px;10

直接上代码

↓

 1 <!DOCTYPE HTML> 2 <HTML> 3   <head> 4   <Meta charset="utf-8"> 5   <Title>HTML5 图片上传预览</Title> 6   <style> 7     #prevIEw { 8       wIDth: 300px; 9       height: 300px;10       overflow: hIDden;11     }12     #prevIEw img {13       wIDth: 100%;14       height: 100%;15     }16   </style>17   <!-- 示例原来用的是本地的jquery，下面改成引用在线的 -->18   <!-- <script src="jquery-1.7.2.min.Js"></script> -->19   <!-- jquery 所有版本在线引用 - 肖朋伟 - CSDN博客 -->20   <!-- https://blog.csdn.net/qq_40147863/article/details/83116859 -->21   <script src="http://libs.baIDu.com/jquery/1.7.2/jquery.min.Js"></script>22   <script type="text/JavaScript">23     // Js+HTML5实现上传图片预览效果完整实例【测试可用】_JavaScript技巧_内存溢出24     // https://www.jb51.net/article/111651.htm25     // URL.createObjectURL和URL.revokeObjectURL - 诗&远方 - 博客园26     // https://www.cnblogs.com/liulangmao/p/4262565.HTML27     function prevIEw1(file) {// 不支持低版本浏览器28       var img = new Image(),url = img.src = URL.createObjectURL(file);29       var $img = $(img)30       img.onload = function() {31         URL.revokeObjectURL(url);32         $(‘#prevIEw‘).empty().append($img);33       }34     }35     function prevIEw2(file) {36       var reader = new fileReader();37       reader.onload = function(e) {38         var $img = $(‘<img>‘).attr("src",e.target.result);39         $(‘#prevIEw‘).empty().append($img);40       }41       reader.readAsDataURL(file);42     }43      44     $(function() {45       $(‘[type=file]‘).change(function(e) {46         var file = e.target.files[0];47         // prevIEw1(file);// 方法1 不支持低版本浏览器48         prevIEw2(file);// 方法249       })50     })51   </script>52 </head>53 <body>54 <form enctype="multipart/form-data" action="" method="post">55   <input type="file" name="imageUpload"/>56   <div ID="prevIEw" style="border:1px solID gray;"></div>57 </form>58 </body>59 </HTML>