javascript的图片上传

最新推荐文章于 2024-01-26 11:12:12 发布

Temmo_JUN

最新推荐文章于 2024-01-26 11:12:12 发布

阅读量373

点赞数

分类专栏：前端小模块文章标签：图片 html预览

本文链接：https://blog.csdn.net/Temmo_Lin/article/details/52396208

版权

前端小模块专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于上传图片预览

常常会遇到长传图片时怎么只有图片名却看不见图片的问题

<!DOCTYPE html>
<html>  
    <head>  
    <meta charset="utf-8" />  
    <style type="text/css">  
     #preview,img{  
         width:300px;  
         height:300px;  
     }  
     #preview{  
        border:1px solid #000;
    }
    #h{
        position: relative;
        width: 300px;
        height: 300px;
        top: -300px;
        opacity: 0;
    }  
     </style>  
     </head>  
<body>  
    <div id="preview"></div>  
    <input type="file" id="h" accept="image/*">  
    <script type="text/javascript"> 
        var addEvent=function(elem,type,handler){
            if(window.addEventListener){
                addEvent=function(elem,type,handler){
                 elem.addEventListener(type,handler,false);
                }
            }
            else if(window.attachEvent){
                addEvent=function(elem,type,handler){
                    elem.attachEvent('on'+type,handler);
                }
            }
            addEvent(elem,type,handler);
        };
        var h=document.getElementById('h');
        var prevDiv=document.getElementById("preview");
        addEvent(h,'change',function(event){
            event=event||window.event;
            var file=event.target;
            if (file.files && file.files[0]){ 
                var reader = new FileReader();
                reader.readAsDataURL(file.files[0]); 
                reader.onload = function(evt){
                    prevDiv.innerHTML = '<img src="' + evt.target.result + '" />'; 
                }    
            } 
         })
    </script>
 </body>  
 </html>

简单的来说就是将input放大到和前一个div一样大小，然后将input移到前面的div中，将input的透明度设为0。
这里写图片描述

Temmo_JUN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript的图片上传

关于上传图片预览常常会遇到长传图片时怎么只有图片名却看不见图片的问题<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style type="text/css"> #preview, .img, img{ width:200px; height:20
复制链接

扫一扫