在html中創建多用途按鈕

在手機上時，我無法查看這兩個按鈕，因爲它們相距太遠。我想在選擇文件後這樣做，'選擇文件'按鈕將被上傳按鈕取代。這可能嗎。我需要做什麼？在html中創建多用途按鈕

我的HTML -

<form method="post" action="" enctype="multipart/form-data" name="form1"> 
    <input name="file" type="file"class="box"/>   
    <input type="submit" id="mybut" value="Upload" name="Submit"/> 
</form>

- 注意，我不小心把它們放在單獨的行或使字體smaller-等

來源

2012-11-22 thedullmistro

寫JavaScript代碼...有什麼ü試圖 –

我的JavaScript技能AREN」很好地說最好的。如果有人至少將我指向正確的方向，我會嘗試編寫代碼。 – thedullmistro

點擊選擇文件後，如果文件被捕獲沒有錯誤，您選擇按鈕可以成爲調用上傳過程的上傳按鈕。上傳完成或失敗後按鈕返回選擇功能。切換行爲的排序不是嗎？ – bonCodigo

最簡單的方法：

<form method="post" action="" enctype="multipart/form-data" name="form1"> 
     <input name="file" type="file" onchange="if($(this).val().length){$(this).hide().next().show()}" class="box"/>   
     <input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/> 
    </form>

沒有jQuery的，只有JavaScript

<form method="post" action="" enctype="multipart/form-data" name="form1"> 
     <input name="file" type="file" onchange="this.nextElementSibling.style.display = 'block'; this.style.display = 'none';" class="box"/>   
     <input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/> 
    </form>

來源

2012-11-22 08:46:27

嗯，這是更多的我正在尋找的答案，但它似乎不工作。少了什麼東西？ – thedullmistro

錯誤是什麼？ –

當我選擇要上傳的文件後，「選擇文件」按鈕仍然不會更改爲上傳按鈕。 – thedullmistro

<script type="text/javascript"> 
$(function() { 
$("input:file").change(function(){ 
    var fileName = $(this).val(); 
    if(fileName){ 
     remove chose file button and show upload button(visible property) 
    } 

}); 
});

檢查jQuery - Detecting if a file has been selected in the file input

來源

2012-11-22 08:32:10

是的，這確實很容易。您可以偵聽文件輸入事件onchange並隱藏它。

HTML：

<input name="inpt" type="file"/> 
<input type="button" value="Upload"/>

的Javascript：

//this event is fired when the file is chosen (not when user presses the cancel button) 
inpt.onchange = function(e) { 
    //setting display to "none" hides an element 
    inpt.style.display="none"; 
};

JSfiddle

PS。如果你想要的話，你可以使用相同的技巧只在選擇文件時顯示「上傳」按鈕。在這種情況下，按鈕代碼將爲<input id="btn" type="button" value="Upload" style="display:none"/>，並在您編寫的代碼btn.style.display=""中顯示該按鈕。

來源

2012-11-22 08:35:07 AlexStack

嗯，那個小提琴似乎沒有做我所問的？在選擇文件後，它不會使用上載按鈕替換選擇文件按鈕。 – thedullmistro

我在最後添加了一些評論。嘗試這個小提琴：http://jsfiddle.net/4Vk8Z/2/ – AlexStack

但是，它不是一個壞的投票。 – Ramya

-1

我可以說有多種方式來做到這一點。但在覈心Java腳本下面是方法

（1）最初設定的上傳按鈕無法比擬的顯示樣式，以隱藏

（2）寫出輸入文件類型onChange事件處理程序

（3）在該處理函數中，如果值不爲null，則通過應用display style none來隱藏輸入文件，然後將上傳按鈕的樣式更改爲空（''）。

希望這種方法適用

來源

2012-11-22 08:39:36 Ramya

在html中創建多用途按鈕

回答

相關問題