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]);
    
    
    
    
                        
    
                 
    
    
    
                }
    
    
    
    
    
    
    
            }
    
        }
    
  • 相关阅读:
    ffplay代码播放pcm数据
    linux设备驱动
    i2c协议
    macos安裝Ruby
    mac安裝node.js
    Flutter-Wrap流式布局
    Flutter-CircleAvatar圆形和圆角图片
    Flutter-indexstack
    Flutter-Card卡片布局
    Flutter-去除ListView滑動波紋
  • 原文地址:https://www.cnblogs.com/webqiand/p/5508378.html
Copyright © 2011-2022 走看看