Question

为了国际化，我使用了假按钮技术。当我尝试假按钮时，一切都很好，除了表单没有提交。

它仅在我单击实际浏览按钮并选择文件时提交。

有人可以对这种行为有所了解。

<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>

Answer 1

虽然上述行为仍然没有答案，但我能够实现文件上传控制的本地化 -

    <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;

}

使用假按钮和文本字段的html浏览按钮的国际化

1 个答案: