精华内容
下载资源
问答
  • input上传文件样式修改

    千次阅读 2017-10-22 10:48:09
    <!DOCTYPE html> <title></title> * { margin: 0; padding: 0; } .upload { display: inline-block; width: 120px; height: 60px; line-height: 60px;... 上传文件
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <style>
          * {
            margin: 0;
            padding: 0;
          }
    
          .upload {
            display: inline-block;
            width: 120px;
            height: 60px;
            line-height: 60px;
            background: #009ad6;
            position: relative;
            text-align: center;
          }
          /*input 标签有默认的宽高border,outline*/
          .upload> input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /*透明度为0*/
            opacity: 0;
            cursor: pointer;
          }
    
        </style>
      </head>
      <body>
    
        <div class="upload">
          上传文件
          <input type="file">
        </div>
    
      </body>
    </html>
    

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

    2014-08-16 22:11:56
    系统默认样式(原始样式)      修改后的样式  实现代码: ... 请选择要上传文件:   id='textfield' type='text' class=”txt” readonly />   class='btn'  type='button' 

     

           系统默认样式(原始样式)

     

     

           修改后的样式

       

       实现代码:

     

    ①  Html代码

             <p>请选择要上传的文件:</p>

          <input id='textfield' type='text' class=”txt” readonly />

          <input class='btn'    type='button'  value='浏览...' />

     

    ②  css代码

    /*文本框样式*/

              #reg.txt{

          width:200px;

          height:24px;

          border:1px solid #cdcdcd;

          border-radius:3px;

          background:#fff;

          margin:0 0 0 15px;

        }

    /*按钮样式*/

        #reg.btn{

             background:#FFF;

             border:1px solid #CDCDCD;

            height:24px;

            width:70px;

        }

    /*file隐藏*/

        #fileField{

            display:hidden;

        }

     

    ③  js文件 ()

        $('#reg .btn').click(function(){

            $('#fileField').click();

        });

    展开全文
  • 修改文件上传样式 修改思路是让一个按钮替代原来的样式。点击按钮和点击原来的选择文件元素是一样的效果。我们可以考虑让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()
          })
    
    展开全文
  • 1.在模态框里写文件上传 2.修改input为file的样式 默认是“选择文件”,直接在后面显示文件的名字 解决:修改样式 方法如下: ...

    1.在模态框里写文件的上传
    2.修改input为file的样式
    默认是“选择文件”,直接在后面显示文件的名字
    解决:修改样式
    方法如下:

      <form action="http://localhost:8080/GD/UploadAction_execute.action" method="post" enctype="multipart/form-data" name="uploadfile">
      <input type="file" name="my" id="file" value="浏览" style="display: none;"                      onchange="document.uploadfile.filePath.value=this.value"/>
      <input type="text" name="filePath" id="filePath"/>
      <input type="button" value="浏览..." onclick="document.uploadfile.my.click()"/><br>
      <input type="submit" value="上传" id="shangchuan">
      </form>
    展开全文
  • 修改之后的样式: 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...
  • type=file修改按钮样式
  • type=file导入文件按钮样式修改的jsp代码-完美好 4中样式修改,兼容任何浏览器 源码下载地址:http://download.csdn.net/download/u014246526/10121396 或http://download.csdn.net/download/u014246526/10177870...
  • nput file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。代码如下:DOM结构:&lt;a href="javascript:;" class="a-upload"&gt; ...
  • 文件上传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
  • 带有文件上传修改页面样式

    千次阅读 2016-10-19 16:27:40
    上传文件按钮样式
  • type=file导入文件按钮样式修改的jsp代码-完美好,4种样式的对比
  • input file 上传文件 样式修改

    千次阅读 2013-11-26 15:58:25
    首先,给 元素戴个套子,这样比较安全嘛,是不是?看代码: 浏览... ...问题的核心有两点:第一,把丑陋的原生上传控件给藏起来;第二,支持点击上传功能。 关键的代码片段: .input-file { over
  • 修改文件上传的默认样式

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

    千次阅读 2016-07-05 13:02:45
    jsp:选择文件导入 : 点击这里上传文件 批量导入 css: .a-upload { padding: 4px 10px; height: 30px; line-height: 20px; position: rel
  • 修改自定义上传按钮样式 * { margin:0; padding:0; } body { font:14px Verdana, Arial, Geneva, sans-serif; color:#404040; background:#f9f9f9; } .main{ width:300px; height:60px; ...
  • 文件上传样式改变

    2016-12-16 15:31:46
    使用inputfile上传文件上传文件的框简直不要太寒碜,最近做多文件上传修改了一下上传方式,在这做下记录。 改变inputfile的样式是不太现实的事情,所以参考了网上,有两种方式去改变: 将inputfile...
  • demo地址: http://www.appelsiini.net/projects/filestyle/demo.html $("input[type=file]").filestyle({ image: "/nbp/images/pic/openFile1.png", imageheight: 22, imagewidth: 82, ...补个
  • 上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type=‘file' 就可以拥有好看的样式文件上传了 <!--引入组件--> import { Cell } from 'vux' <!--官网的组件是这么写的--> ...
  • 前端的CSS样式繁多,关联性又不大,让前端的小伙伴们头皮发麻,我也是其中之一,有空将用到的有趣又容易忘记的CSS样式做一个总结归纳,(其中很多是前辈的总结)方便自己以后查找用,当然如果能帮到各位一二,亦不胜荣幸 ...
  • 效果:无标题文档/*样式1*/.a-upload {padding: 4px 10px;height: 20px;line-height: 20px;position: relative;cursor: pointer;color: #888;background: #fafafa;border: 1px solid #ddd;border-radius: 4px;...
  • 一:修改上传按钮样式 原来的&lt;input type="file"/&gt;太丑了,所以我自己设置了样式。方法:在&lt;input type="file"/&gt;上面加一层div,遮住它。 .upload{ padding:...
  • 自己最近有个需求是需要用到input的文件上传的,但是原生的input框太丑了,而且框架的也达不到需求,所以努力了一段时间,结合网上各种例子,终于做出来了一个感觉还不错的文件上传的input框,特地分享出来. ...
  • 一般input[type=”file”]都不会采用默认样式,因此需要将真正起作用的隐藏掉,显示一个设计出的按钮样式。隐藏的方法有2种,一种是visibility:hidden,一种是opacity:0。visibility:hidden会给元素留有位置,但是...
  • 改变文件上传 input type="file"按钮的样式 在使用传统原生input file时,通常会想要使得按钮的样式换成自己定义的样式 主要思想 1、使得原按钮在当前位置透明 2、将自己需要的样式覆盖到原按钮上面(通过设置margin...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,463
精华内容 20,585
关键字:

文件上传样式修改