使用假按鈕和文本字段的HTML瀏覽按鈕的國際化

爲了國際化我使用了假按鈕技術。當我嘗試假按鈕時，除非表單不提交，否則所有事情都會發生。使用假按鈕和文本字段的HTML瀏覽按鈕的國際化

它只會在我點擊實際瀏覽按鈕並選擇文件時提交。

有人可以指出這種行爲。

<html> 
    <script> 
    function triggerFileUpload() 
    { 
     try{ 
      document.getElementById("theFile").click(); 
     }catch(e){ 
     alert(e); 
     } 
    } 

     function setHiddenValue() 
     { 
     document.getElementById("dummyField").value = document.getElementById ("theFile").value; 
     } 
    </script> 
<body> 
<div id="dummyDiv"> 
<form action="http://www.google.com"> 
<input type="Text" disabled="disabled" class="inputField" id="dummyField"/> 
<input type="button" class="inputField" value="Buscar Archivo" onclick="triggerFileUpload()"/> 
</div> 
<div id="uploadDiv" style="display: block;"> 
<input type="file" id="theFile" name="theFile" onchange="setHiddenValue()"/> 
</div> 
<input type="submit" value="submit"/> 
</form> 

</body> 
</html>

來源

2012-09-20 Madhur

代碼從來沒有提交它。 – Jay

Jay。你能詳細說明一下嗎？ – Madhur

儘管上述行爲仍然沒有答案，但我是能夠實現文件上傳控件的定位 -

<html> 
<head> 
<link rel="stylesheet" href="browse.css" type="Text/css"/> 
<script> 
    function openBrowse(){ 
    document.getElementById("realBrowse").click(); 
    } 
    function populateFakeField(){ 
    document.getElementById("fakeBrowseField").value=document.getElementsByName("q")[0].value; 
    } 
</script> 
</head> 
<body> 
<form action="https://www.google.co.in/search"> 
    <input type="Text" id="fakeBrowseField"/> 
    <!-- The fileinput-button span is used to style the file input field as button --> 
    <span class="btn btn-success fileinput-button"> 
     <span>Buscar Archivo</span> 
     <input type="file" name="q" multiple="" onchange="populateFakeField()"> 
    </span> 

    <input type="submit" value="submit"/> 
</form> 
</body> 
</html>

的browse.css

.fileinput-button { 
    position: relative; 
    overflow: hidden; 
    float: left; 
    margin-right: 4px; 
} 
.fileinput-button input { 
    position: absolute; 
    top: 0; 
    right: 0; 
    margin: 0; 
    border: solid transparent; 
    border-width: 0 0 100px 200px; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    -moz-transform: translate(-300px, 0) scale(4); 
    direction: ltr; 
    cursor: pointer; 
} 
.btn-success { 
    background-color: #5bb75b; 
    border-color: #51a351 #51a351 #387038; 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
} 


.btn { 
    display: inline-block; 
    padding: 4px 10px 4px; 
    margin-bottom: 0; 
    font-size: 13px; 
    line-height: 18px; 
    color: #333333; 
    text-align: center; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
    vertical-align: middle; 
    cursor: pointer; 
    background-color: #d4d0c8; 
    border: 1px solid #cccccc; 
    /*border: 0;*/ 
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    border-color: #d4d0c8 #d4d0c8 #bfbfbf; 
    border-bottom-color: #b3b3b3; 

}

來源

2012-09-25 08:54:22 Madhur

使用假按鈕和文本字段的HTML瀏覽按鈕的國際化

回答

相關問題