精华内容
下载资源
问答
  • 修改文件上传样式
    2020-12-28 17:12:54
    前端是用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;
          }
        }
    
    更多相关内容
  • 修改文件上传样式 修改思路是让一个按钮替代原来的样式。点击按钮和点击原来的选择文件元素是一样的效果。我们可以考虑让input的父级元素相对定位,然后让input元素绝对定位,并且可见度为0,就是看不见,但是点击...

    修改文件上传的样式

    修改思路是让一个按钮替代原来的样式。点击按钮和点击原来的选择文件元素是一样的效果。我们可以考虑让input的父级元素相对定位,然后让input元素绝对定位,并且可见度为0,就是看不见,但是点击也能出现选择文件的效果,input元素再增加一个兄弟节点,就是我们说的按钮,选择文件对外显示按钮样式效果。

    html代码:
    <form id="contractMessage" enctype="multipart/form-data">
    div class="upload-btn">
                      <input type="file" name="singleFile" class="file-ele" multiple="multiple">
                      <div class="file-open">上传文件</div>
                   </div>
    </form>
    css代码:
    .upload-btn {
        position: relative;
        display: inline-block;
        overflow: hidden;
        border:1px solid #2d78f4;
        border-radius: 3px;
        vertical-align: middle;
    }
    .upload-btn .file-ele{
        position: absolute;
        top:0;
        right:0;
        opacity: 0;
        height: 100%;
        width: 100%;
        cursor: pointer;
    }
    .upload-btn .file-open {
        width:90px;
        height:25px;
        line-height:25px;
        text-align: center;
        color:#fff;
        background: #3385ff;
    }
    

    自制文件列表

    思路:创建文件列表容器,文件上传的时候 获取文件名 将文件名添加到文件列表容器中

    <div class="fileerrorTip" style="padding-left:65px;"></div>
     <div class="showFileName">
                   <ul></ul>
     </div>
     使用change事件获取文件上传时候的文件名:
     js代码:
     var $contractForm = $("#contractMessage")
     var $uploadFile = $('[name="singleFile"]', $contractForm)
     var files = []//文件流数组 用以保持文件流数组和文件列表容器中的文件一致性
          $uploadFile.on('change',function(){
                $(".fileerrorTip").html("").hide();
                var filePath = $(this).val()
                var fileSize = this.files[0].size
                var arr=filePath.split('\\')
                var fileName=arr[arr.length-1]
                var flag = false
                $(".showFileName ul li").each(function(i,ele){
                      if($(ele).text() === fileName){
                            flag = true                       
                            return false
                      }
                })
                if(flag){
                      $(".fileerrorTip").html(fileName+"文件已存在!").show()
                      return
                }
                if(fileSize>50*1024*1024){
                      $(".fileerrorTip").html("上传文件最大为50M,您上传的文件大小超过限制!").show(); 
                      return false
                }else{
                      $('.showFileName ul').append($('<li style="line-height:20px;width:250px;padding-left:15px;position:relative;margin-bottom:5px;">'+fileName+'<i class="fa fa-times-circle deleteFile" aria-hidden="true" style="font-size:12px;position:absolute;top:5px;right:10px;display:none;"></i></li>'))
                      $(".fileerrorTip").html("").hide();
                      files.push(this.files[0]) 
                      $(this).val("")//清空input = file的值用来控制每次点击上传都能触发change事件
                }
    
          })
          $(".showFileName ul").on('mouseover','li',function(){//鼠标移入li显示背景色和图标
                $(this).css('backgroundColor','#DCDCDC')
                $(this).children('i').css('display','block')
          })
          $(".showFileName ul").on('mouseout','li',function(){
                $(this).css('backgroundColor','')
                $(this).children('i').css('display','none')
          })
          $(".showFileName ul").on('click','.deleteFile',function(){//删除li同时删除相应的文件流
                $(".fileerrorTip").html("").hide(); 
                var deleteFileName = $(this).parent('li').text()
                files.forEach(function(curval,index){
                      if(curval.name===deleteFileName){
                      files.splice(index,1)
                }
                })
                $(this).parent('li').remove()
          })
    
    展开全文
  • 修改之后的样式: 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

    展开全文
  • 效果: <!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下: 不管是上面哪种,样式都比较简单,和很多网页的风格都不太协调。 根据用户的需求,设计风格,改变其...
  • 上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type=‘file' 就可以拥有好看的样式文件上传了 <!--引入组件--> import { Cell } from 'vux' <!--官网的组件是这么写的--> ...
  • type=file修改按钮样式
  • 解决办法:使用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;

    }

    展开全文
  • 修改文件上传的默认样式

    千次阅读 2019-02-22 15:27:39
    修改文件上传样式 默认的上传样式看起来有点丑,我们经常可能要去修改它,input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。 直接上代码:如下 //css...
  • 更改html中上传文件样式

    千次阅读 2018-07-02 21:43:21
    lt;input type="file" name="input" id="...默认样式: 通过css、js对上面的样式进行更改,得到: 其中CSS、HTML、JS代码如下:HTML: &lt;div class="input-file&quo
  • input自定义文件上传样式

    千次阅读 2019-09-04 17:51:20
    自己最近有个需求是需要用到input的文件上传的,但是原生的input框太丑了,而且框架的也达不到需求,所以努力了一段时间,结合网上各种例子,终于做出来了一个感觉还不错的文件上传的input框,特地分享出来. ...
  • 可能在用户体验方面会形成困扰,今天就给大家介绍一下文件上传按钮的用户自定义样式的实现。实现原理:建立两个层,一个层包装以下简称文件按钮层,一个层包装上传文件按钮的自定义样式,以下渐层样式层。设置两个层...
  • 在用这个样式之前我们要准备两个资源包,分别是fileinput.css和fileinput.js将他们导入到项目中,同时还要导入jQuery <link rel="stylesheet" href="./css/fileinput.css"> <script src="./js/jquery-...
  • 文件上传按钮的样式

    2021-04-01 10:12:46
    原声文件上传按钮样式比较简单不太好看,而且貌似不可修改,所以自己便使用CSS透明度的方法给它改造,代码如下 本次项目使用的是vue,所以{{xlsName}}是自己通过Change方法获取e.target.files[0].name来赋值的 若是...
  • 本地文件上传都是通过input标签,type属性是file,这样就会很丑,在许多地方都有局限性 <input type="file" style=" visibility: hidden;position: absolute;top: 0px;width: 0px;" ref="importJson" @change=...
  • 主要介绍了HTML中文件上传时使用的<input type="file">元素的样式自定义的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 对el-upload样式进行修改 .el-breadcrumb__inner, .el-breadcrumb__inner a { font-weight: 400 !important; } .el-upload { input[type="file"] { display: none !important; } } .filestyle { .el-upload {...
  • 文件上传样式美化

    千次阅读 2017-08-30 23:18:42
    先展示效果图:(没有上传图片的样子)(上传图片后的样子)...我觉得有点丑,接着再建一个input框,type设置为text就可以了,用来存放我们上传文件路径,然后,设置一个a标签,样式取boostrap的按钮样式,当然,你喜
  • 点击控件任何地方(包括右边的选择文件按钮,和左边编辑框),都会弹出文件选择对话框,选择文件上传。但是本控件显示简陋,提示信息死板,满足不了我们需要。 本文以修改显示图片为例,详细讲讲我最近解决方案。 前端...
  • 上传文件样式修改

    2017-09-27 16:29:07
    html: 上传 css: label{ border-radius: .4rem; background-color: #979fa8; color: #fff; display: inline-block; padding: .8rem 4rem; cursor: pointer; margin-bot
  • ant 修改upload组件样式上传样式
  • 一般input[type=”file”]都不会采用默认样式,因此需要将真正起作用的隐藏掉,显示一个设计出的按钮样式。隐藏的方法有2种,一种是visibility:hidden,一种是opacity:0。visibility:hidden会给元素留有位置,但是...
  • 备注 在平时使用input标签上传文件时,我们往往不需要使用它的默认样式,但是也往往很难修改它的默认样式,所以只能通过 将input标签覆盖在我们的按钮上,然后将input标签设置定位脱离文档流,并将透明度调为零解决...
  • 前端的CSS样式繁多,关联性又不大,让前端的小伙伴们头皮发麻,我也是其中之一,有空将用到的有趣又容易忘记的CSS样式做一个总结归纳,(其中很多是前辈的总结)方便自己以后查找用,当然如果能帮到各位一二,亦不胜荣幸 ...
  • 为input设置opacity: 0,上为input原始样式,下为修改样式
  • 上传图片" :class="dataSet[xiancout].imgs.length>=3?'prohibit':''"> <i class="el-icon-upload2"></i> // js部分 // 点击外层盒子触发file的点击事件也就是change事件 upimgdom () { if(this....
  • 处于安全上的考虑,input[type="file"] 的文件选择按钮样式并不能随意修改(不过可以修改input 的透明度),可能会跟设计师的设计格格不入,这时可以使用透明效果来自定义上传按钮
  • 00type=file导入文件按钮样式修改的jsp代码-完美好,非常好用

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,194
精华内容 25,677
关键字:

修改文件上传样式