Blueimp的jQuery文件上傳按鈕觸發

Question

這聽起來很elemetary，但我找不到一個Blueimp jQuery文件上傳的代碼示例，它使瀏覽器的默認文件輸入框（一個說「選擇文件...」和瀏覽）元素隱藏，而是通過按鈕觸發對話框。有人告訴我如何做到這一點？

我試過把輸入元素放在按鈕元素中，如this demo所示，但它在Firefox上不起作用。有什麼方法可以使用jQuery來觸發對話框。我不確定爲什麼Chrome在Chrome瀏覽器中可以正常工作，而「瀏覽」按鈕恰好與Chrome中的按鈕相對應，但不在FF中。

這裏就是我想要做的本質：

<button id="upload-button" class="btn btn-primary btn-large" type="button"> <input type="file" name="image" id="fileupload" multiple data-url=""/> Upload Images
</button><br>

Answer 1

這聽起來像你問了幾個問題在這裏，所以我會盡力解決這些問題。

1. 隱藏的默認輸入 - here示例頁面上，你可以看到他的CSS需要隱藏默認的文件輸入元素的護理：

   .fileinput-button input { cursor: pointer; direction: ltr; font-size: 23px; margin: 0; opacity: 0; position: absolute; right: 0; top: 0; transform: translate(-300px, 0px) scale(4); }

2. 如何觸發 - 有在至少2種方法可以做到這一點：

   2.1基本實例like so：$('#fileupload').fileupload();

   2.2務實通過變化事件綁定到另一個事件，在這種情況下：

   $('#some-file-input-field').bind('change', function (e) { $('#fileupload').fileupload('add', { fileInput: $(this) }); });

   ，實施例也被上the API

Answer 2

改變按鈕元件的跨度實測值（與只它就像一個按鈕），就像插件的demo page一樣。