文件上傳樣式修改

在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>

這里簡單對文件大小進行了限制。修改后如下

這樣整體顯示美觀，方便用戶查看自己選擇的文檔。