0

国際化するために、私は偽のボタン技術を使用しました。偽のボタンを試してみると、フォームが送信されないことを除いてすべてうまくいきます。

実際の参照ボタンをクリックしてファイルを選択したときにのみ送信されます。

誰かがこの振る舞いに光を当てることができますか?

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

1 に答える 1

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>

ブラウズ.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-25T08:54:22.963 に答える