zoukankan      html  css  js  c++  java
  • 关于input file 改样式的操作方式

      最近项目要做那个什么,文件上传和图片上传,只能用 input file 了,这个input file 有点丑,需要改样式。

      我是这么做的:

    <div class="btn">
    <input type="button" name="upload" id="upload" value="上傳" />
    <input type="text" name="filename" id="filename" value="" />
    <input type="file" class="input-file" id="a" style="display: none;"/>
    </div>
    <div>
    </div>
    <script type="text/javascript">
    document.getElementById("upload").onclick=function(){
    document.getElementById("a").click();
    }

    document.getElementById("a").onchange=function(){
    var value = this.value;

    document.getElementById("filename").value=value;

    }
    </script>

    首先把input file display none 隐藏起来,然后呢我再把按钮点击后触发Input file的点击。

    恩 然后用一个 input text 来放 input file 的value  Ok 就是这个样子,简单点 需要的样式简单点,做个前端很心累,样式改变很复杂。

    好了 至于在线实时预览和 上传压缩 这个稍后再讲。

  • 相关阅读:
    php基本语法学习
    mac下charles使用
    python--logging模块
    CSS样式(二)
    CSS样式(一)
    HTML、CSS基础知识(四)
    HTML、CSS基础知识(三)
    HTML、CSS基础知识(二)
    HTML、CSS基础知识(一)
    python学习(三十四)第一个框架
  • 原文地址:https://www.cnblogs.com/fordouble/p/6993067.html
Copyright © 2011-2022 走看看