文件上传样式修改

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

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

生成对应的html代码如下：

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

chrome

firefox

总之是不好看，尤其是如果表单中存在上传文件，在编辑的时候，上传的文件不能直接显示，同样显示未选择任何文件，这就很不友好了（可能是我还没找到显示的方法）。因此，我这里对针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>

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

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

文件上传样式修改

推荐阅读