zoukankan      html  css  js  c++  java
  • HTML 上传图片实用小技巧

    最近写的项目需要用的上传图片的功能但是浏览器自带的按钮样式实在是不忍直视,肯定要进行修改,网上也有很多方法(自己查....),我这里用了个取巧的方法:就是函数的间接调用 在点击btn的时候让它执行了图片选择的函数

    代码虽然很简单  但是效果很明显,再也不用为选择器的样式担心了~随便设计

    html 代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script type="text/javascript" src="js/choseImage.js" ></script>
            <style>
            .Btn{
                width: 100px;
                height: 50px;
                border-radius: 10px;
                background-color: #72D5FB;
                position: absolute;
                top: 300px;
                left: 300px;
                outline: none;
                border: none;
            }
            #choseImage{
                display: none;
            }
            </style>
            
            
            
        </head>
        <body>
            <input type="file" id="choseImage" onchange="showPreview(source)" />
            <input type="button" class="Btn" value="选择图片" onclick="Btns()")/>
            <script>
                function Btns() {
                    document.getElementById("choseImage").click();
                }
            </script>
        </body>
    </html>

    JS代码

    function showPreview(source) {
    
    
         var file = source.files[0];
        if (!/image/w+/.test(file.type)) {
            alert("请确保文件为图像类型");
            return false;
        }
        if (window.FileReader) {
            var fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onload = function(e) {
                
                
                
                //当图片加载成功后需要执行的操作~
                document.getElementById("myBgimage").src = e.target.result;
                
    
    
            };
        }
    }
  • 相关阅读:
    (转)交换两个变量的值,不使用第三个变量的四种法方
    Java权威编码规范
    Git的安装和设置
    ActiveMQ简单入门
    JMS术语
    求助 WPF ListViewItem样式问题
    初步探讨WPF的ListView控件(涉及模板、查找子控件)
    圆角button
    用Inno Setup来解决.NetFramework安装问题
    [!!!!!]Inno Setup教程-常见问题解答
  • 原文地址:https://www.cnblogs.com/xbgTitle/p/5388154.html
Copyright © 2011-2022 走看看