上次尝试解决这个图片上传缩略图的问题,遇到了瓶颈,这次解决了。
通过h5新特性file,基本实现了我要的功能,写了个demo分享一下。
一、代码实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> #preview, .img, img { width: 200px; height: 200px; } #preview { border: 1px solid #000; } </style> </head> <body> <div id="preview"></div> <input type="file" onchange="preview(this)"/> <h3>设计理念说明(200字以内)</h3> <textarea onkeyup="checkLen(this)"></textarea> <div>您还可以输入 <span id="count">200</span> 个文字</div> <script type="text/javascript"> function checkLen(obj) { var maxChars = 200;//最多字符数 if (obj.value.length > maxChars) obj.value = obj.value.substring(0, maxChars); var curr = maxChars - obj.value.length; document.getElementById("count").innerHTML = curr.toString(); } </script> <script type="text/javascript"> function preview(file) { var prevDiv = document.getElementById('preview'); if (file.files && file.files[0]) { var reader = new FileReader(); reader.onload = function (evt) { prevDiv.innerHTML = '<img src="' + evt.target.result + '" />'; } reader.readAsDataURL(file.files[0]); } else { prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>'; } } </script> </body> </html> |
照着这个套路写就对了,简单愉快。
二、总结
顺带一提,在IE上也是支持的这样去浏览缩略图的,真是不容易。