精华内容
下载资源
问答
  • 修改文件上传样式 修改思路是让一个按钮替代原来的样式。点击按钮和点击原来的选择文件元素是一样的效果。我们可以考虑让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()
          })
    
    展开全文
  • 文件上传样式修改

    2017-06-29 14:51:00
    在html中的input file文件上传控制默认风格与样式很难看,所以这里进行了修改。 <span class="file"> <%= f.file_field :file%> </span> 生成对应的html代码如下: <input type=...

    在html中的input file文件上传控制默认风格与样式很难看,所以这里进行了修改。

      <span class="file">
          <%= f.file_field :file%>
        </span>

    生成对应的html代码如下:

    <input type="file" id="file">

    chrome

    firefox

    IE

    总之是不好看,尤其是如果表单中存在上传文件,在编辑的时候,上传的文件不能直接显示,同样显示未选择任何文件,这就很不友好了(可能是我还没找到显示的方法)。因此,我这里对针file的样式进行了修改,具体修改如下:

     <input type="text" id="file_name" readonly="readonly" value="<%= @document.file%>" />
              <a href="javascript:void(0);" class="input">
                浏览
                <input type="file" id="file" name="document[file]">
              </a>

    这里将选择文件输入框包含在a标签之内。选择文件之后同样可以将文件名保存在input输入框内,便于用户确认。

    对应的css控制:

     1 #file_name{
     2   width: 400px;
     3   height: 30px;
     4 }
     5 a.input {
     6   width:70px;
     7   height:30px;
     8   line-height:30px;
     9   background:#3091d1;
    10   text-align:center;
    11   display:inline-block;/*具有行内元素的视觉,块级元素的属性 宽高*/
    12   overflow:hidden;/*去掉的话,输入框也可以点击*/
    13   position:relative;/*相对定位,为 #file 的绝对定位准备*/
    14   top:10px;
    15 }
    16 a.input:hover {
    17   background:#31b0d5;
    18   color: #ffffff;
    19 }
    20 a{
    21   text-decoration:none;
    22   color:#FFF;
    23 }
    24 #file {
    25   opacity:0;/*设置此控件透明度为零,即完全透明*/
    26   filter:alpha(opacity=0);/*设置此控件透明度为零,即完全透明针对IE*/
    27   font-size:100px;
    28   position:absolute;/*绝对定位,相对于 .input */
    29   top:0;
    30   right:0;
    31 }

     

    对应的javascript控制:

    <script type="text/javascript">
        $(function(){
            $("#file").change(function(){  // 当 id 为 file 的对象发生变化时
                var fileSize = this.files[0].size;
                var size = fileSize / 1024 / 1024;
                if (size > 5) {
                    alert("附件不能大于5M,请将文件压缩后重新上传!");
                    this.value="";
                    return false;
                }else{
                    $("#file_name").val($("#file").val());  //将 #file 的值赋给 #file_name
                }
            })
        });
    
    </script>

    这里简单对文件大小进行了限制。修改后如下

    这样整体显示美观,方便用户查看自己选择的文档。

    转载于:https://www.cnblogs.com/x123811/p/7094425.html

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

    千次阅读 2016-04-26 22:51:36
    页面中修改文件上传默认按钮样式

    只是把原按钮的透明度设为不可见,然后将自己的button放在同一位置,直接上代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文件上传修改浏览按钮</title>
    </head>
    <style>
    	.btn{
    		border: 1px solid #CCC;
    		width: 60px;
    		height: 23px;
    	}
    	.ac_file{
    		width: 52px;
    		left: 41%;
    		position: absolute;
    		cursor: pointer;
    		opacity: 0;
    	}
    </style>
    <body>	
    	<div class="pop_con myResource">
    		<input type="text" id="uploadText" style="width: 40%;" readonly="readonly" placeholder="限.doc.docx.xls.xlsx.ppt.pptx.txt.jpg.gif.png.rar.zip文件"> 
    		<input type="button" class="btn" value="浏览">
    		<input type="file" name="reportFile" class="ac_file" οnchange="document.getElementById('uploadText').value=this.value;"/> 
    	</div>
    </body>
    </html>

    附件地址
    展开全文
  • 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...
  • 文件上传样式改变

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

    千次阅读 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
  • 上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type=‘file' 就可以拥有好看的样式文件上传了 <!--引入组件--> import { Cell } from 'vux' <!--官网的组件是这么写的--> ...
  • 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;... 上传文件
  • 上传文件样式修改

    2014-08-16 22:11:56
    系统默认样式(原始样式)      修改后的样式  实现代码: ... 请选择要上传文件:   id='textfield' type='text' class=”txt” readonly />   class='btn'  type='button' 
  • demo地址: http://www.appelsiini.net/projects/filestyle/demo.html $("input[type=file]").filestyle({ image: "/nbp/images/pic/openFile1.png", imageheight: 22, imagewidth: 82, ...补个
  • 虽然我们无法直接更改表单的input...思路大致是这样的:1、将按钮设置透明度为02、在上面覆盖一个button,使二者位置完全重合,这样就可以实现改变上传按钮的样式,而不会影响上传功能。HTML代码如下 点击上传文件
  • 修改自定义上传按钮样式 * { margin:0; padding:0; } body { font:14px Verdana, Arial, Geneva, sans-serif; color:#404040; background:#f9f9f9; } .main{ width:300px; height:60px; ...
  • 更改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的样式,下面分别是对单选框和上传文件的input的样式做了改变,效果如下: 注:不喜欢这个样式可以自行修改color和background。 HTML代码如下: <div> <label class="label...
  • 虽然我们无法直接更改表单的input[type=file]按钮,但是可以通过曲线救国的方式来实现。 思路大致是这样的: 1、将<input type='file' />按钮设置透明度为0 2、在<input type='file' />上面覆盖一个...
  • 前言:多数时候我们需要表单上传文件,如图片。...如图基于bootstrap布局的表单,但file文件上传样式不敢恭维. 1 <div class="form-group"> 2 <label for="avatar" class="col-md-2 control-labe...
  • 自己最近有个需求是需要用到input的文件上传的,但是原生的input框太丑了,而且框架的也达不到需求,所以努力了一段时间,结合网上各种例子,终于做出来了一个感觉还不错的文件上传的input框,特地分享出来. ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 55,263
精华内容 22,105
关键字:

修改文件上传样式