使用輸入類型文件提交Ajax表單

我使用ajax提交瀏覽，上載並使用PHP處理文件的表單。我討厭標準的HTML輸入類型=「文件」按鈕（正如大多數人所做的那樣），所以使用了一個技巧來點擊我最終可以自定義的另一個按鈕（id =「fileSelect」）中的標準「瀏覽」按鈕。 Safari瀏覽器和其他瀏覽器的效果非常好，但使用IE，提交表單的ajax代碼行不會觸發。執行ajax代碼的其他元素（我在最後得到alert（「Ajax complete」）），但是「$（」＃imageform「）。ajaxForm（{target：'#preview'}）。submit ）;」行在IE中不起作用。使用輸入類型文件提交Ajax表單

Ajax代碼：

$(document).ready(function() 
{  
    $('#xfile').live('change', function() // when there is an even on the 'file' element (like file selected) 
    { 
     $("#preview").html(''); // clears the preview area 
     $("#preview").html('<img src="general_images/loading.gif" alt="Uploading...."/>'); // displays the loading 
     $("#imageform").ajaxForm({target: '#preview'}).submit(); 
     alert ("Ajax complete"); 
    }); 
});

和HTML代碼：

<div> 
<button id="fileSelect" onclick="document.getElementById('xfile').click();">Insert Picture</button> 
<form style="display: inline" id="imageform" name="imageform" action="upload_file_journal.php" method="post" target="_blank" enctype="multipart/form-data"> 
    <input style="visibility: hidden" type='file' name='xfile' id='xfile'/
</form>

來源

2014-02-27 FredASL

這不會在IE 9和舊的工作（我認爲它在IE 10,11 ）。

唯一真正的選擇是使用絕對位置將上傳控件放置在按鈕上方，然後將不透明度設置爲0.1，然後它們看起來像是在單擊按鈕，但實際上是單擊輸入，超大尺寸的文件輸入，以確保他們總是點擊按鈕部分。

即使這樣做是一件麻煩事。希望這有助於

來源

2014-02-27 14:24:49 QBM5

因此，JavaScript工作正常，如果它由本機輸入type =「文件」按鈕觸發，但不是當按鈕由fileSelect按鈕觸發時。我試過使用IE10，但它不起作用。我很好奇它爲什麼不觸發在jQuery代碼中提交。也許這只是一個深刻的IE實現問題，我不應該在意......只是迫使IE用戶使用原生按鈕。 – FredASL

是的，這是爲了我讀過的安全。根據我自己的經驗，您可以使用jquery和輔助按鈕打開文件輸入，但輸入不能按需使用。數據永遠不會讓它到服務器，看看這篇文章，它似乎顯示了我正在描述的修復，http://stackoverflow.com/questions/793014/jquery-trigger-file-input – QBM5

使用輸入類型文件提交Ajax表單

回答

相關問題