輸入文件與交叉瀏覽簡單的按鈕外觀

-1

我必須創建一個按鈕。如果用戶點擊該按鈕，則會提示他選擇要上傳的文件。選擇文件後，使用JavaScript或JQuery，我必須填寫表單並提交它，以便文件可以上傳。輸入文件與交叉瀏覽簡單的按鈕外觀

的問題是，我不能就如何做到這一點使用普通的HTML

<input type="file" name="xml" class="custom-upload" id="custom-upload"/>

有沒有呢？我已經徹底搜索，所有可能的答案似乎過於複雜，所以我認爲我錯過了一個更重要的解決方案。

來源

2013-02-27 Rafael El Bundas Fernandez

你到底要什麼的JavaScript的伎倆

$("#imageButton").on('click', function() { $("#fileImageButton").trigger('click'); });

或者，香草？ – Starx 2013-02-27 17:08:30

你是什麼意思_「我不能使用通常的HTML」_？ – magnattic 2013-02-27 17:08:54

相關：http://stackoverflow.com/questions/793014/jquery-trigger-file-input **或** http://stackoverflow.com/questions/5291942/how-to-trigger-a-input-type -file-element-using-jquery **或** http://stackoverflow.com/questions/4502612/trigger-file-upload-dialog-using-javascript-jquery **和** https://www.google .ca/search？num = 100＆newwindow = 1＆q = jquery + trigger + input + type + file + site％3Astackoverflow.com – 2013-02-27 17:18:34

您可以改爲創建顯示按鈕圖像的圖像。然後點擊該按鈕，可以觸發真實文件輸入的點擊事件。

<img id="imageButton" src="soure/to/imagebutton.jpg" /> 
<input type="file" id="fileImageButton" style="display: none; " />

而且一點點的jQuery做

document.getElementById('imageButton').addEventListener('click', function() { 
    fileinput = document.getElementById('fileImageButton'); 

    if (document.createEvent) { 
    var evt = document.createEvent("MouseEvents") 
    evt.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null); 
    fileinput.dispatchEvent(evt); 
    } else { 
    element.fireEvent("onclick"); //For IE 
    } 
});

來源

2013-02-27 17:12:03 Starx

YU使用JQUERY？！？我知道OP有它作爲標籤...但沒有必要使用它... :-( – Neal 2013-02-27 17:13:07

@Neal，Common不要傷心，我也會添加一個JS版本。 – Starx 2013-02-27 17:13:54

這使我可以觸發點擊輸入，這是真的，這是我試圖使用的解決方案之一，但我怎麼能「等待」用戶選擇他的文件，然後改變表單域並提交到我的服務器？ – 2013-02-27 17:21:11

輸入文件與交叉瀏覽簡單的按鈕外觀

回答

相關問題