zoukankan      html  css  js  c++  java
  • 上传图片预览

    <script type="text/javascript">
    
            function previewImage(file) {
        var WIDTH = 80;
        var HEIGHT = 80;
        var div = document.getElementById('preview');
        if (file.files && file.files[0]) {
            div.innerHTML = '<img id=HeadImages>';
            var img = document.getElementById('HeadImages');
            img.onload = function () {
                var rect = clacImgZoomParam(WIDTH, HEIGHT, img.offsetWidth, img.offsetHeight);
                img.width = rect.width;
                img.height = rect.height;
                //                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top + 'px';
            }
            var reader = new FileReader();
            reader.onload = function (evt) { img.src = evt.target.result; }
            reader.readAsDataURL(file.files[0]);
        }
    	}
    </script>  
    
    <form name="form5" id="form5" method="post" action="#">
    
    <input type="file" name="file5" id="file5" onchange="previewImage(this)"/>
    <div id="preview"></div>
    </form>
    

     判断img

    //上传图片
        function previewImage(file, imgid) {
    
    
            
    
    
    
    
    
    
            var img = document.getElementById(imgid);
    
            var reg = /.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/;
    
            var fileName = file.value;
             
            if (fileName.lastIndexOf(".") == -1) {
                
                Showbo.Msg.alert("上传的图片只能是jpg、gif、bmp、png、jpeg类型!");
    
                $("#upimgts").html("未选择图片");
              
                
                return false;
            } else {
    
    
                var fileType = (fileName.substring(fileName.lastIndexOf("."), fileName.length)).toLowerCase();
    
                
    
                if (!reg.test(fileType)) {
                  
                    Showbo.Msg.alert("上传的图片只能是jpg、gif、bmp、png、jpeg类型!");
                 
                    $("#upimgts").html("未选择图片");
                    return false;
                }
    
                else {
                    
                   
    
                   
                        
                    
                    $("#upimgts").html(fileName);
    
    
    
    
    
    
    
    
                            var reader = new FileReader();
                            reader.onload = function (evt) { img.src = evt.target.result; }
                            reader.readAsDataURL(file.files[0]);
    
    
    
    
                        
    
                 
    
    
    
                }
    
    
    
    
    
    
    
            }
    
        }
    
  • 相关阅读:
    BZOJ3589: 动态树
    BZOJ3631: [JLOI2014]松鼠的新家
    BZOJ3307: 雨天的尾巴
    BZOJ1895: Pku3580 supermemo
    BZOJ3786: 星系探索
    BZOJ2819: Nim
    解题:POI 2009 Lyz
    解题:POI 2016 Nim z utrudnieniem
    解题:POI 2004 Bridge
    解题:POI 2018 Prawnicy
  • 原文地址:https://www.cnblogs.com/webqiand/p/5508378.html
Copyright © 2011-2022 走看看