精华内容
下载资源
问答
  • 文件上传样式修改
    2017-09-27 16:29:07

    html:

    <label>
      <span>上传</span>
      <input type="file" id="fileUpload">  
    </label>
      <span id="uploadFileName"></span>
      <span class="fileerrorTip"></span>

    css:

    label{
        border-radius: .4rem;
        background-color: #979fa8;
        color: #fff;
        display: inline-block;
        padding: .8rem 4rem;
        cursor: pointer;
        margin-bottom: 1rem;
        position: relative;
        overflow: hidden;
        text-align: center;
        transition: background-color .5s cubic-bezier(.24,.68,.67,.9);
      }
      span{
            cursor: pointer;
        pointer-events: none;
      }
      input[type=file] {
        display: none;
        visibility: hidden;
      }
    js:

    <script type="text/javascript">
        $("#fileUpload").on("change",function(){
        var filePath=$(this).val();
        if(filePath.indexOf(".csv")!=-1 ){
            $(".fileerrorTip1").html("").hide();
            var arr=filePath.split('\\');
            var fileName=arr[arr.length-1];
            $("#uploadFileName").html(fileName);
        }else{
            $("#uploadFileName").html("");
            $(".fileerrorTip").html("您未上传文件,或者您上传文件类型有误!").show();
            return false
        }
    })
     $("body").on('change','#fileUpload',function () {
           $("#uploadFileName").html("");
     
       });
              
              
      var e = document.getElementById("fileUpload");
       e.addEventListener("change",function(){//attachEvent
              alert("nihao");
       })
    </script>



    更多相关内容
  • 前端是用vue写的 <div class="upload_reveal"> 上传文件 <input type="file" class="upload_file" :id="uploadFileMaintenance'" accept="image/*" v-on:change="readLocalF
    前端是用vue写的
      <div class="upload_reveal">
                上传文件
                <input
                  type="file"
                  class="upload_file"
                  :id="uploadFileMaintenance'"
                  accept="image/*"
                  v-on:change="readLocalFile(index)"
                />
       </div>
       **
    ## css
    **
      .upload_reveal {
          display: inline-block;
          width: 100px;
          height: 30px;
          line-height: 30px;
          background: #409EFF;
          position: relative;
          text-align: center;
          color: #FFFFFF;
          border-radius: 5px;
    
          .upload_file {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /*透明度为0*/
            opacity: 0;
            cursor: pointer;
          }
        }
    
    展开全文
  • 修改之后的样式: style: .upload{ font-size:12px; margin-left: -40px; overflow:hidden; position:absolute} .file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px; opacity:0...

    原始的样式:

    <input type="file">
    

    在这里插入图片描述

    修改之后的样式:

    在这里插入图片描述
    style:

    .upload{
        font-size:12px;
        margin-left: -40px;
        overflow:hidden;
        position:absolute}
    .file{
        position:absolute;
        z-index:100;
        margin-left:-180px;
        font-size:60px;
        opacity:0;
        filter:alpha(opacity=0);
        margin-top:-5px;
    }
    

    HTML:

    <el-row>
            <el-col :span="24" style="margin-top: 50px;">
              <el-menu>
                <el-menu-item index="1">
                    <span class="upload">最近文件/活动</span>
                    <input type="file" class="file" size="1">
                </el-menu-item>
                <el-menu-item index="2">
                    <span class="upload">从材料库上传</span>
                    <input type="file" class="file" size="1">
                </el-menu-item>
                <el-menu-item index="3">
                    <span class="upload">从本地上传</span>
                    <input type="file" class="file" size="1">
                </el-menu-item>
                <el-menu-item index="4">
                    <span class="upload">从我的资源上传</span>
                    <input type="file" class="file" size="1">
                </el-menu-item>
              </el-menu>
            </el-col>
    </el-row>
    

    在这里插入图片描述

    参考链接:http://www.cnblogs.com/beiz/p/5594319.html

    展开全文
  • 解决办法:使用text文本框及a链接模拟文件上传按钮,把文件上传按钮放在他们上面,并且文件上传按钮显示透明。最终效果如下:[HTML]代码浏览onchange="getFile(this,'copyFile')" />[CSS]代码*...

    我们在程序开发中,经常要用到上传文件的功能。但是,这个类型的元素,产生的文件框和浏览按扭,它们的样式往往不符合我们的需要。怎么样才能控制控制它们的样式和位置呢?

    解决办法:使用text文本框及a链接模拟文件上传按钮,把文件上传按钮放在他们上面,并且文件上传按钮显示透明。

    最终效果如下:

    591563fbdfd5fc95a06f9c69da1deca4.png

    [HTML]代码

    浏览

    οnchange="getFile(this,'copyFile')" />

    [CSS]代码

    * {

    margin:0;

    padding:0;

    }

    body {

    font:14px Verdana, Arial, Geneva, sans-serif;

    color:#404040;

    background:#fff;

    }

    img {

    border-style:none;

    }

    .main{

    width:300px;

    height:60px;

    position:absolute;

    left:50%;

    top:50%;

    margin-left:-150px;

    margin-top:-30px;

    }

    .box{

    position:relative;

    float:left;

    }

    input.uploadFile{

    position:absolute;

    right:0px;

    top:0px;

    opacity:0;

    filter:alpha(opacity=0);

    cursor:pointer;

    width:276px;

    height:36px;

    overflow: hidden;

    }

    input.textbox{

    float:left;

    padding:5px;

    color:#999;

    height:24px;

    line-height:24px;

    border:1px #ccc solid;

    width:200px;

    margin-right:4px;

    }

    a.link{

    float:left;

    display:inline-block;

    padding:4px 16px;

    color:#fff;

    font:14px "Microsoft YaHei", Verdana, Geneva, sans-serif;

    cursor:pointer;

    background-color:#0099ff;

    line-height:28px;

    text-decoration:none;

    }

    展开全文
  • 有简单的单文件上传,有多文件上传,因浏览器原生的文件上传样式及功能的支持度不算太高,很多时候我们会对样式进行美化,对功能进行完善。 本文根据一个例子,对多文件的上传样式做了一些简单的美化(其实也没怎么...
  • 修改文件上传样式 修改思路是让一个按钮替代原来的样式。点击按钮和点击原来的选择文件元素是一样的效果。我们可以考虑让input的父级元素相对定位,然后让input元素绝对定位,并且可见度为0,就是看不见,但是点击...
  • 效果: <!doctype html> <html> <head>... /*样式1*/ .a-upload { padding: 4px 10px; height: 20px; line-height: 20px; position: relative; cursor: pointer; color: #888
  • Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多网页的风格都不太协调。 根据用户的需求,设计风格,改变其...
  • 关于type=file的input是啥? 这个是啥我觉得没必要再说了,反正大家都知道,然后在现在有各种手机的时代,还可以通过直接拍照的方式来上传...上传按钮的样式调整 玩过CSS的人朋友都知道,在HTML元素中,表单控件元素的
  • type=file修改按钮样式
  • 主要介绍了vue+vux实现移动端文件上传样式,样式使用的是vux的cell组件,需要的朋友可以参考下
  • 一般input[type=”file”]都不会采用默认样式,因此需要将真正起作用的隐藏掉,显示一个设计出的按钮样式。隐藏的方法有2种,一种是visibility:hidden,一种是opacity:0。visibility:hidden会给元素留有位置,但是...
  • 上传文件时默认样式是: 其html为: <input type="file" class="file" title=""> 更改之后的样式为: html为: <div class="fileinp"> <div class="upload">上传</div> <in...
  • 改变上传文件表单默认样式

    千次阅读 2018-06-09 17:02:47
    上传文件表单默认样式 1.代码&lt;div style="margin-top:50px; text-align:center"&gt; &lt;form id="uploadForm" action="" method="post" enctype="...
  • 修改文件上传的默认样式

    千次阅读 2019-02-22 15:27:39
    修改文件上传样式 默认的上传样式看起来有点丑,我们经常可能要去修改它,input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。 直接上代码:如下 //css...
  • 上传图片" :class="dataSet[xiancout].imgs.length>=3?'prohibit':''"> <i class="el-icon-upload2"></i> // js部分 // 点击外层盒子触发file的点击事件也就是change事件 upimgdom () { if(this....
  • 00type=file导入文件按钮样式修改的jsp代码-完美好,非常好用
  • 解决百度WebUploader照片上传插件中多按钮上传问题。获取任何一个上传按钮事件并经行分类处理,file文件图片上传样式美化,支持IE9+等浏览器上传图片
  • 前端的CSS样式繁多,关联性又不大,让前端的小伙伴们头皮发麻,我也是其中之一,有空将用到的有趣又容易忘记的CSS样式做一个总结归纳,(其中很多是前辈的总结)方便自己以后查找用,当然如果能帮到各位一二,亦不胜荣幸 ...
  • nput file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。代码如下:DOM结构:&lt;a href="javascript:;" class="a-upload"&gt; ...
  • 文件上传按钮的样式

    2021-04-01 10:12:46
    原声文件上传按钮样式比较简单不太好看,而且貌似不可修改,所以自己便使用CSS透明度的方法给它改造,代码如下 本次项目使用的是vue,所以{{xlsName}}是自己通过Change方法获取e.target.files[0].name来赋值的 若是...
  • HTML如何实现以form表单方式上传文件而不刷新页面.zip 我们都用过HTML以form表单方式文件上传然后刷新页面 如何才能不刷新页面而上传文件呢?
  • 点击完上传图片之后 显示的图片大小怎么改 就是点击上传之后 图片会显示在框里,但是图片变得很大,怎么调显示之后框的大小
  • 文件上传input file默认样式修改

    千次阅读 2018-09-28 11:27:43
    &lt;!DOCTYPE html&gt; &lt;html&gt; &...文件上传按钮修改样式&lt;/title&gt; &lt;style&gt; .file-box{ display: inline-block; position: relative; pad
  • 本地文件上传都是通过input标签,type属性是file,这样就会很丑,在许多地方都有局限性 <input type="file" style=" visibility: hidden;position: absolute;top: 0px;width: 0px;" ref="importJson" @change=...
  • 文件上传样式改变

    千次阅读 2016-12-16 15:31:46
    使用inputfile上传文件上传文件的框简直不要太寒碜,最近做多文件上传修改了一下上传方式,在这做下记录。 改变inputfile的样式是不太现实的事情,所以参考了网上,有两种方式去改变: 将inputfile...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,057
精华内容 24,422
关键字:

文件上传样式修改

友情链接: zipSUSAN001.rar