首页 javaWEB 兼容所有浏览器图片上传预览纯js(代码简洁亲测试可用)

兼容所有浏览器图片上传预览纯js(代码简洁亲测试可用)

很多人都遇到的问题。。 图片上传预览 网上找到了并且用了。。 哈哈。。 不用后台处理。。 <!DOCTYPE ht…

很多人都遇到的问题。。

图片上传预览

网上找到了并且用了。。

哈哈。。

不用后台处理。。

 <!DOCTYPE html>
 <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)" />
 <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>

 

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。

为您推荐

nodejs 整理记录

nodejs 整理记录

下载包 https://blog.csdn.net/m0_59878114/article/details/120274...
websocket测试html

websocket测试html

<!DOCTYPE html> <html> <head> <meta cha...
bigdemical两个数比较大小

bigdemical两个数比较大小

/*int result = bigdemical1.compareTo(bigdemical2) result = -...
Beetl2.7 中文文档

Beetl2.7 中文文档

Beetl目前版本是2.7.23,相对于其他java模板引擎,具有功能齐全,语法直观,性能超高,以及编写的模板容易维护等...
纯CSS实现多个便签在一行展示,拖动滚动

纯CSS实现多个便签在一行展示,拖动滚动

div <h2>请注意需要在移动端预览,PC端拖拽无效果</h2> <div class=...
返回顶部