图片上传后即时预览
2016-07-25 11:02
218 查看
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> //设置图片上传后预览的div样式 <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)" /> //图片上传和预览 <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>
相关文章推荐
- git常用配置
- 简单dp算法——百炼06:股票买卖
- 浅谈Java中的equals和==
- 在NSObject类中,和继承它的类中,弹出UIAlertcontroller和push、present到其它界面
- Activity进入退出动画总结
- Spring是什么
- 统计分析学习之数值分析方法
- java集合类深入分析之TreeMap/TreeSet篇
- PHP 中转换 SGML 类语言为真实中文字符
- bundler_0.4在windows下的编译
- 工作杂谈
- BZOJ2243 [SDOI2011]染色
- 深入理解ReentrantLock
- I.MX6 i2c_data_write_byte ioctl error: I/O error
- RefreashListView(自定义ListView)
- Android中用native 修饰的方法学习
- Unity DestroyImmediate和Destroy区别
- Linux下安装软件的一般步骤
- PS水面倒影制作
- 设计模式之桥接模式——链接两地的交通枢纽