zoukankan      html  css  js  c++  java
  • 文件上传input简便美化方案(需求变更)

    编辑们嫌先选择文件,再上传文件麻烦,要求只点击一次按钮就直接上传,只好把以前的上传控件再改改。。没想到竟然更简单了~~~

    html:

    <form id="UploadForm" method="post" enctype="multipart/form-data">
        <div class="file-uploader-wrap">
            <input type="file" class="file-uploader"  name="uploadDataField" id="FileUploader"/>
            <div class="file-uploader-wrap-fake">
                <a href="javascript:void(0)" class="link-btn-gray4" >上传文件</a>
            </div>
        </div>
    </form>

    css:

    .file-uploader-wrap{
        position: relative;
        width: 70px;
        height: 27px;
        margin-top: 20px;
    }
    .file-uploader-wrap-fake{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        height: 27px;
    }
    .file-uploader-wrap .file-uploader{
        position: relative;
        width: 70px;
        height: 27px;
        filter : alpha(opacity = 0);
        opacity: 0;
        z-index: 2;
        cursor: pointer;
    }

    js:

    window.onload = function(){
    
        var fileUploader = document.getElementById('FileUploader');
    
        if(fileUploader.addEventListener){
            fileUploader.addEventListener('change', fileUploaderChangeHandler, false);
        }else if(fileUploader.attachEvent){
            fileUploader.attachEvent('onchange', fileUploaderChangeHandler);
        }
    
        function fileUploaderChangeHandler(){
            uploadFile(); // 异步上传文件
        }
    }

    页面效果:

    就一个按钮~~简单明了~

  • 相关阅读:
    [网络基础 ] 分层体系结构
    网络的基础知识
    计算机网络基础知识总结
    理解urllib、urllib2及requests区别及运用
    js ajax请求
    c# winform导出Excel
    mysql小技巧
    “允许源文件与模块生成文件不同” 解决方法 ,亲测最有效的
    ThoughtWorks.QRCode生成二维码
    python3.5.2爬虫
  • 原文地址:https://www.cnblogs.com/zhaoran/p/3102487.html
Copyright © 2011-2022 走看看