Twitter Bootstrap表單文件元素上載按鈕

本文翻譯自：Twitter Bootstrap Form File Element Upload Button

Why isn't there a fancy file element upload button for twitter bootstrap? 爲什麼Twitter bootstrap沒有花哨的文件元素上傳按鈕？ It would be sweet if the blue primary button was implemented for the upload button. 如果爲上傳按鈕實現了藍色主按鈕，那將是很好的。 Is it even possible to finesse the upload button using CSS? 甚至可以使用CSS來精簡上傳按鈕嗎？ (seems like a native browser element that can't be manipulated) （看起來像是無法操作的本機瀏覽器元素）

---

#1樓

參考：https://stackoom.com/question/l8n0/Twitter-Bootstrap表單文件元素上載按鈕

---

#2樓

Upload buttons are a pain to style because it styles the input and not the button. 上傳按鈕很難用於樣式，因爲它會對輸入而不是按鈕進行樣式設置。

but you can use this trick: 但你可以使用這個技巧：

http://www.quirksmode.org/dom/inputfile.html http://www.quirksmode.org/dom/inputfile.html

Summary: 摘要：

1. Take a normal <input type="file"> and put it in an element with position: relative . 取一個普通的<input type="file">並將其放在一個position: relative的元素中。

2. To this same parent element, add a normal <input> and an image, which have the correct styles. 對於同一個父元素，添加一個普通的<input>和一個具有正確樣式的圖像。 Position these elements absolutely, so that they occupy the same place as the <input type="file"> . 絕對定位這些元素，使它們佔據與<input type="file">相同的位置。

3. Set the z-index of the <input type="file"> to 2 so that it lies on top of the styled input/image. 將<input type="file">的z-index設置爲2，使其位於樣式化輸入/圖像的頂部。

4. Finally, set the opacity of the <input type="file"> to 0. The <input type="file"> now becomes effectively invisible, and the styles input/image shines through, but you can still click on the "Browse" button. 最後，將<input type="file">的不透明度設置爲0. <input type="file">現在變得有效不可見，並且樣式輸入/圖像閃耀，但您仍然可以單擊“瀏覽” “按鈕。 If the button is positioned on top of the image, the user appears to click on the image and gets the normal file selection window. 如果按鈕位於圖像頂部，則用戶似乎單擊圖像並獲得正常的文件選擇窗口。 (Note that you can't use visibility: hidden, because a truly invisible element is unclickable, too, and we need the to remain clickable) （請注意，您不能使用visibility：hidden，因爲真正不可見的元素也是不可忽略的，我們需要保持可點擊狀態）

---

#3樓

It's included in Jasny's fork of bootstrap. 它包含在Jasny的bootstrap中。

A simple upload button can be created using 可以使用創建簡單的上傳按鈕

<span class="btn btn-file">Upload<input type="file" /></span>

With the fileupload plugin you can create more advanced widgets. 使用fileupload插件，您可以創建更高級的小部件。 Have a look at http://jasny.github.io/bootstrap/javascript/#fileinput 看看http://jasny.github.io/bootstrap/javascript/#fileinput

---

#4樓

Works for me: 適合我：

• Pretty file input field in Bootstrap Bootstrap中的漂亮文件輸入字段

Update 更新

jQuery plugin style : jQuery插件樣式 ：

// Based in: http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/
// Version: 0.0.3
// Compatibility with: Bootstrap 3.2.0 and jQuery 2.1.1
// Use:
//     <input class="nice_file_field" type="file" data-label="Choose Document">
//     <script> $(".nice_file_field").niceFileField(); </script>
//
(function( $ ) {
  $.fn.niceFileField = function() {
    this.each(function(index, file_field) {
      file_field = $(file_field);
      var label = file_field.attr("data-label") || "Choose File";

      file_field.css({"display": "none"});

      nice_file_block_text  = '<div class="input-group nice_file_block">';
      nice_file_block_text += '  <input type="text" class="form-control">';
      nice_file_block_text += '  <span class="input-group-btn">';
      nice_file_block_text += '   <button class="btn btn-default nice_file_field_button" type="button">' + label + '</button>';
      nice_file_block_text += '  </span>';
      nice_file_block_text += '</div>';

      file_field.after(nice_file_block_text);

      var nice_file_field_button = file_field.parent().find(".nice_file_field_button");
      var nice_file_block_element = file_field.parent().find(".nice_file_block");

      nice_file_field_button.on("click", function(){ console.log("click"); file_field.click() } );
      file_field.change( function(){
        nice_file_block_element.find("input").val(file_field.val());
      });
    });
  };
})( jQuery );

---

#5樓

With no additional plugin required, this bootstrap solution works great for me: 由於不需要額外的插件，這個引導程序解決方案對我很有用：

<div style="position:relative;">
        <a class='btn btn-primary' href='javascript:;'>
            Choose File...
            <input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="file_source" size="40"  onchange='$("#upload-file-info").html($(this).val());'>
        </a>
        &nbsp;
        <span class='label label-info' id="upload-file-info"></span>
</div>

demo: 演示：

http://jsfiddle.net/haisumbhatti/cAXFA/1/ (bootstrap 2) http://jsfiddle.net/haisumbhatti/cAXFA/1/（bootstrap 2）

http://jsfiddle.net/haisumbhatti/y3xyU/ (bootstrap 3) http://jsfiddle.net/haisumbhatti/y3xyU/（bootstrap 3）

---

#6樓

this is the best file upload style I like: 這是我喜歡的最佳文件上傳樣式：

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="input-append">
    <div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span><a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

you can get demo and more styles at: 您可以在以下位置獲得演示和更多樣式：

http://www.jasny.net/bootstrap/javascript/#fileinput http://www.jasny.net/bootstrap/javascript/#fileinput

but using this, you should replace twitter bootstrap with jasny bootstrap files.. 但使用這個，你應該用jasny bootstrap文件替換twitter bootstrap ..

regards. 問候。