HTML5+JS实现简单的图片上传预览
直接上代码
↓
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.htm 25 // URL.createObjectURL和URL.revokeObjectURL - 诗&远方 - 博客园 26 // https://www.cnblogs.com/liulangmao/p/4262565.html 27 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);// 方法2 49 }) 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>
