JavaScript 中的打開文件對話框

Question

我需要一個解決方案來在單擊div時以 HTML 格式顯示打開的文件對話框。 單擊div時必須打開打開文件對話框。

我不想將輸入文件框顯示為 HTML 頁面的一部分。 它必須顯示在單獨的對話框中，該對話框不是網頁的一部分。

Answer 1

 $("#logo").css('opacity','0'); $("#select_logo").click(function(e){ e.preventDefault(); $("#logo").trigger('click'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

對於 IE 添加這個：

$("#logo").css('filter','alpha(opacity = 0');

Answer 2

我不知道為什么沒有人指出這一點，但這是一種無需任何 Javascript 的方式，它也與任何瀏覽器兼容。

---

編輯：在 Safari 中，當使用display: none隱藏時， input會被禁用。 更好的方法是使用position: fixed; top: -100em position: fixed; top: -100em 。

編輯 2：另一種方法是使用opacity: 0 。 問題是它會弄亂布局。 我在示例中添加了一些 CSS 來說明問題。

---

 label { display: inline-block; background: #ddd; border: 1px outset #ccc; border-radius: .3em; padding: .3em 1em; margin: .5em; } label:active { border-style: inset; }

 <label> Using <code>position: fixed</code> <input type="file" style="position: fixed; top: -100%"> </label> <label> Using <code>opacity: 0</code> <input type="file" style="opacity: 0"> </label>

如果您願意，可以通過在指向輸入id的label中使用for來采用“正確的方式” ，如下所示：

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

Answer 3

這是一個不錯的

精細上傳器演示

它本身就是一個<input type='file' />控件。 但是在其上放置了一個 div，並應用了 css 樣式來獲得這種感覺。 文件控件的不透明度設置為 0，以便在單擊 div 時似乎打開了對話框窗口。

Answer 4

實際上，您不需要所有具有不透明度、可見性、 <input>樣式等的東西。看看：

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

jsFiddle上的演示。 在 Chrome 30.0 和 Firefox 24.0 中測試。 但是，在 Opera 12.16 中不起作用。

Answer 5

最簡單的方法：

 #file-input { display: none; }

 <label for="file-input"> <div>Click this div and select a file</div> </label> <input type="file" id="file-input"/>

重要的是，使用display: none確保隱藏文件輸入不會占用任何位置（使用opacity: 0會發生什么）。

Answer 6

這對我來說最有效（在 IE8、FF、Chrome、Safari 上測試）。

 #file-input { cursor: pointer; outline: none; position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; filter: alpha(opacity=0); /* IE < 9 */ opacity: 0; } .input-label { cursor: pointer; position: relative; display: inline-block; }

 <label for="file-input" class="input-label"> Click Me <!-- Replace with whatever text or icon you wish to use --> <input type="file" id="file-input"> </label>

說明：我將文件輸入直接放置在要單擊的元素上方，因此任何單擊都將落在它或其標簽上（這會拉出上傳對話框，就像您單擊標簽本身一樣）。 我在默認輸入的按鈕部分伸出標簽側面時遇到了一些問題，因此overflow: hidden並在標簽上display: inline-block是必要的。

Answer 7

1. 將輸入元素type="file"放在頁面上的任何位置並用style="display:none"隱藏它。 給輸入元素一個id。 例如id="myid" 。

<input type="file" style="display:none" id="myid"/>

2. 選擇要用於打開文件對話框的任何 div、圖像、按鈕或任何元素，為其設置 onclick 屬性，如下所示：

<a href="#" onclick="document.getElementById('myid').click()"/>

Answer 8

首先添加head標簽：

<script>
   function showDialog(openFileDialog) {
       document.getElementById(openFileDialog).click();
   }
   function fileName(openFileDialog) {
       return document.getElementById(openFileDialog).value;
   }
   function hasFile(openFileDialog) {
       return document.getElementById(openFileDialog).value != "";
   }
   function fileNameWithoutFakePath(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(fileName.lastIndexOf('\\') + 1);
   }
   function fakePathWithoutFileName(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(0, fileName.lastIndexOf('\\'));
   }
</script>

如果您已經有腳本標簽，只需在上面添加這些功能。

在您的正文或表單標簽中添加：

<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>

無論在您的 html 中的哪個位置，就像您創建了一個類型為 OpenFileDialog 類的新實例作為全局變量，其名稱是元素的id ，無論在您的代碼或 xaml 中的什么位置，但在您的腳本或代碼中，你不能輸入他的名字，然后讀取一個屬性或調用一個函數，因為有些全局函數會做那些沒有在元素輸入 type="file" 中定義的函數。 您只需為這些函數提供隱藏輸入 type="file" 的 id，它是 OpenFileDialog 實例的名稱作為字符串。

為了簡化您為 html 創建打開文件對話框實例的工作，您可以創建一個函數來執行此操作：

function createAndAddNewOpenFileDialog(name) {
     document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}

如果要刪除打開文件對話框，則可以制作並使用以下功能：

function removeOpenFileDialog(name) {
    var html = document.getElementById("yourBodyOrFormId").innerHtml;
    html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
    document.getElementById("yourBodyOrFormId").innerHtml = html;
}

但在刪除打開文件對話框之前，請通過制作和使用以下功能確保它存在：

function doesOpenFileDialogExist(name) {
    return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}

如果您不想在 html 的正文或表單標簽中創建和添加打開文件對話框，因為這是添加隱藏的輸入類型 =“文件”，那么您可以使用上面的創建函數在腳本中執行此操作：

function yourBodyOrFormId_onload() {
    createAndAddNewOpenFileDialog("openFileDialog1");
    createAndAddNewOpenFileDialog("openFileDialog2");
    createAndAddNewOpenFileDialog("openFileDialog3");
    createAndAddNewOpenFileDialog("File Upload");
    createAndAddNewOpenFileDialog("Image Upload");
    createAndAddNewOpenFileDialog("bla");
    //etc and rest of your code
}

確保在您的身體或表單標簽附近，您添加了：

onload="yourBodyOrFormId_onload()"

如果您已經這樣做了，則不必在上面執行此操作。

提示：您可以將新的 JScript 文件添加到您的項目或網站中，如果您還沒有的話，在這個文件中您可以將所有打開的文件對話框功能遠離腳本標簽和 html 或 web 表單頁面，並使用從這個 JScript 文件將它們放在您的 html 或 web 表單頁面中，但不要忘記之前將 html 或 web 表單頁面鏈接到 JScript 文件。 您只需將 JScript 文件拖到head標簽中的 html 頁面即可。 如果您的頁面是 web 表單而不是簡單的 html，並且您沒有 head 標簽，則將其放在任何地方以便它可以工作。 不要忘記在該 JScript 文件中定義全局變量，其值將是您的正文或表單 id 作為字符串。 將 JScript 文件鏈接到 html 或 web 表單頁面后，您可以 onload 表單正文的事件，將該變量的值設置為您的正文或表單 ID。 然后在 JScript 文件中，您不必再為文檔提供一頁的正文或表單的 id，只需為其提供該變量的值即可。 您可以調用該變量bodyId或formId或bodyOrFormId或您想要的任何其他名稱。

祝你好運！

Answer 9

如果 javascript 在客戶端機器上被關閉怎么辦？ 對所有場景使用以下解決方案。 你甚至不需要 javascript/jQuery。 ：

HTML

<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>

CSS

#fileInput{opacity:0}  
body{
    background:cadetblue;
}

解釋： for="Your input Id" 。 HTML 默認觸發點擊事件。 所以它默認觸發點擊事件，不需要jQuery/javascript。 如果它只是由 HTML 完成，為什么要使用 jQuery/jScript？ 而且您無法判斷客戶端是否禁用了 JS。 即使 JS 關閉，您的功能也應該可以工作。

工作 jsFiddle （你不需要 JS，jquery）

Answer 10

您可能對以下內容感興趣： http ： //code.google.com/p/upload-at-click/

點擊元素將打開“打開文件”對話框

運行自定義功能。

Answer 11

AFAIK 你仍然需要一個<input type="file">元素，然后你可以使用quirksmode中的一些東西來設置它的樣式

Answer 12

這是我在找不到好的解決方案后開發的解決方案

let input = document.createElement("input");
input.type = "file";
input.setAttribute("multiple", true);
input.setAttribute("accept", "image/*");
input.onchange = function (event) {
    //
    console.log(this.files);
};
input.click();

Answer 13

唯一沒有<input type="file">的方法是在 div 上嵌入一個透明的 flash 電影。 然后，您可以使用用戶生成的點擊事件（符合 Flash 10 新安全規則）來觸發對 flash 的FileReference.browse的調用。

它提供了對quirksmode 方式的額外依賴，但作為回報，您會獲得更多事件（例如內置的進度事件）。

Answer 14

可以使用

$('<input type="file" />').click()