使用Javascript觸發IE9文件輸入

Question

我在這里發布了一個帖子：

.change在IE9中表現怪異

但是，我遇到了有關文件上傳的表單處理的新事件，並且很好奇是否有人遇到了此問題。

我最初的問題是我無法啟動onchange事件，並且我認為這可能與我的JavaScript有關，但我發現這與激活表單的方式有關。

我有文件輸入

<input type="file" name="abc"/>

現在我已經做了兩件事。

我已經隱藏了輸入，並創建了一個用於激活輸入的按鈕（用於更好的樣式控制）。

<button id="mybutton">click to upload a pic</button>
<input type="file" name="abc"/>

然后是JS用於兩者之間的交互：

$("#mybutton").click(function() {
    $("Input[type=file]").click()
};

當然是表單的提交（我在本示例中使用父級，但是您在我的實際代碼中使用表單ID）。

$("input[type=file]").change(function() {
  $(this).parent().submit();
});

當我單擊“ mybutton”時，確實發生了預期的結果，瀏覽窗口打開，並允許我從計算機中選擇文件。 同樣，當我在除IE之外的所有瀏覽器中更改文件時，也會觸發onchange事件。 現在，如果我取消隱藏表單，然后手動單擊“瀏覽”按鈕並選擇一個文件，則會觸發onchange事件。 因此，基本上，瀏覽器對待單擊實際文件按鈕的方式與執行$（“ input [type = file]”）。click（）不同。

有人知道怎么修這個東西嗎？

Answer 1

如前所述，IE在提交包含文件輸入的表單時非常嚴格。 必須通過真正的鼠標單擊觸發文件輸入，才能提交表單。 另外，IE9和文件輸入似乎存在一個錯誤。

好消息是，有一種方法可以使用標簽繞過IE的安全限制：

1. 創建鏈接到文件輸入的常規標簽標簽。 標簽將照常觸發輸入文件。
2. 使用CSS將標簽偽裝成按鈕。
3. 必須顯示文件輸入（對於IE8），但是可以使用“ visibility：hidden”隱藏。 IE8將接受此黑客。

Answer 2

如果我沒記錯的話，您將無法更改此設置，因為這是（本來是）旨在保護用戶的隱私，避免在沒有明確的用戶許可/操作的情況下上載文件。

Answer 3

1. 確保您的代碼在$("document").ready(function(){... here..});

2. 與.live("change", function(){});連線時，似乎文件輸入 不太好用

其他樣式的東西是其他東西，但CSS並不那么復雜- 漂亮的文件上傳