當模擬輸入=文件點擊時使用jQuery奇怪的IE小故障

我'製作'這片jQuery + html來完成以下內容：
有一個佔位符圖像，用戶可以點擊，導致文件選擇對話框打開。一旦選擇了文件，相應的多部分表單就會上傳到服務器。我試圖模仿此文件上傳的AJAX行爲，所以我也使用一個不可見的iframe來接收服務器響應。
讓我首先提出的代碼，因此它會更容易說明問題當模擬輸入=文件點擊時使用jQuery奇怪的IE小故障

jQuery("#myInput").change(function() { // Submit form upon file selection 
    // alert("myInput.val() = " + $('#myInput').val()); // alert 1 
    $('#form1').submit(); 
    // alert("myInput.val() = " + $('#myInput').val()); // alert 2 
}); 

<form id="form1" action="/do_upload.php" method="post" enctype="multipart/form-data" target="target_frame"> 
<input id="myInput" type="file" name="userfile" /><br> 
</form> 
<img src="/img/placeholder.png" onclick="$('#myInput').click();" > 

<iframe id="target_frame" name="target_frame" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

代碼工作完全在新的Chrome/FF/Safari瀏覽器。（有趣的是，如果我在「myInput」上設置「visibility：hidden」，它甚至可以工作。顯然這不是一個安全問題）。但是，IE 9和10都顯示相同的行爲：單擊圖像可成功啓動對話框，文件路徑在「警報1」中正確設置，但它在「警告2」中不存在，並且表單未提交。另一方面，直接點擊「myInput」的瀏覽按鈕，會彈出對話框並提交表單。
我完全被這種行爲如何實現的困惑所迷惑！任何建議如何打擊惱人的IE瀏覽器將不勝感激:)

來源

2013-10-08 Alex M

在控制檯中的任何錯誤？ –

您可以嘗試在圖像的onclick回調中更改_.click（）_到_.change（）_，即** onclick =「$（'＃myInput'）。change（）;」**？ –

'click'方法對我來說一直不好。在研究了其他圖書館如何解決這個問題之後，我選擇了使用'input'元素覆蓋圖像的方法，將其設置爲不透明度值，以便人類不可見，但對於不透明度值不可見。所以用戶總是做一個真正的點擊。 –

我相信這是IE的安全功能。如果使用其他觸發器，它將不允許您訪問文件輸入的名稱屬性。

您必須單擊IE的文件輸入，而不要使用其他觸發器。

編輯：一種解決方法IE clears input[type="file"] on submit

來源

2013-10-08 05:19:26 luke2012

但是我認爲從邏輯上講，只是隱藏input = file元素並模擬點擊它不是安全問題。事實上，用戶將看到文件對話框，並將選擇他們想要的任何文件，或者關閉對話框。我認爲這就是爲什麼我的代碼可以在大多數現代瀏覽器中使用，除了IE。真正的安全問題是允許以編程方式設置input = file元素的值。所以實際上，在我的情況下，$（'＃myInput'）.val（'any_value'）不會影響任何瀏覽器的值。這完全合乎邏輯:) –

我決定去了我的形象疊加一個透明的文件元素的方法。我的靈感來自於這個頁面：https://coderwall.com/p/uer3ow。這是我的HTML和CSS中要求：

.file_loader { 
    position: relative; 
    overflow: hidden; 
    border: solid gray 1px; 
    margin: auto; 
    width: 300px; 
    height: 400px; 
} 

.file_loader .hidden_file { 
    display: block; 
    background: white; 
    font-size: 80px; 
    height: 100%; 
    width: 100%; 
    opacity: 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.placeholder { 
    height: 100%; 
    width: 100%; 
} 

<div class="file_loader"> 
    <img src="/img/placeholder.png" id="placeholder1" class="placeholder" > 
    <form id="form1" action="/do_upload.php" method="post" enctype="multipart/form-data" target="target_frame"> 
    <input id="myInput" class="hidden_file" type="file" name="userfile" /><br> 
    </form> 
</div>

正如你可以看到「file_loader」級的高度和寬度執行佔位符圖像的尺寸和透明輸入= file元素疊加。這個CSS中有一件事真的很棒，它來自於這個鏈接。我正在討論爲文件元素設置非常大的字體大小。它是使它在IE中工作的關鍵，因爲它恰好使「瀏覽」按鈕變得如此巨大，以至於它佔據了整個佔位符。在不改變字體大小的情況下，在IE中，只有部分圖像能夠顯示文件對話框（其餘部分將是透明文本字段）。我會指出，在Chrome/Firefox/Safari中，這種字體大小的技巧是不必要的，因爲整個文件元素都可以在那裏點擊。

來源

2013-10-09 04:00:22

當模擬輸入=文件點擊時使用jQuery奇怪的IE小故障

回答

相關問題