文件上传样式修改

在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控制：

#file_name{
  width: 400px;
  height: 30px;
}
a.input {
  width:70px;
  height:30px;
  line-height:30px;
  background:#3091d1;
  text-align:center;
  display:inline-block;/*具有行内元素的视觉，块级元素的属性 宽高*/
  overflow:hidden;/*去掉的话，输入框也可以点击*/
  position:relative;/*相对定位，为 #file 的绝对定位准备*/
  top:10px;
}
a.input:hover {
  background:#31b0d5;
  color: #ffffff;
}
a{
  text-decoration:none;
  color:#FFF;
}
#file {
  opacity:0;/*设置此控件透明度为零，即完全透明*/
  filter:alpha(opacity=0);/*设置此控件透明度为零，即完全透明针对IE*/
  font-size:100px;
  position:absolute;/*绝对定位，相对于 .input */
  top:0;
  right:0;
}

 

对应的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>

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

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