Question

我想点击我的Styled span标签，然后打开上传文件窗口，这是我输入的内容[type =＆＃34; file＆＃34;]。

PS ：我无法更改HTML代码。

我从另一个问题得到了这段代码：Link 但我不理解这一部分（我的代码都不起作用：c）

$("span.Anexo input").addClass('inputFile');

$("span").click(function() {

  $("input.inputFile'").trigger('click');
  
});

$('input.inputFile').on('change', function() {
  var val = $(this).val();
  $(this).siblings('span').text(val);
})

以下是我尝试的内容：

＆＃13;

span.Anexo label{ display: none;}
input#fu89_1_14_0{display: none;}
span#formContato_ctl00_rptAba_rptSessao_0_rptCampos_0_ctl00_6 {
    display: block !important;
    width: 100%;
    height: 70px;
    border: 3px dotted #009997;
    background-color:red;
    padding: 0.5em 1.1em;
    border-radius: 0;
    -webkit-transition: border 500ms ease-out;
    -moz-transition: border 500ms ease-out;
    -o-transition: border 500ms ease-out;
    transition: border 500ms ease-out;
    margin-bottom: 10px;
}
span#formContato_ctl00_rptAba_rptSessao_0_rptCampos_0_ctl00_6:hover{border-color: white;}
span#formContato_ctl00_rptAba_rptSessao_0_rptCampos_0_ctl00_6:before {
    background: url(someincon.svg) no-repeat;
    content: 'Clique aqui para enviar o arquivo';
    line-height: 3.2;
    font-size: 1.2em;
    text-align: left;
    padding-left: 4em;
    background-size: contain;
    display: block;
    width: 100%;
    height: 100%;
    color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Anexo">
  <label>Anexo:</label>
  <input type="file" name="ctl00$formContato$ctl00$rptAba$ctl00$rptSessao$ctl00$rptCampos$ctl06$fu89_1_14_0" id="fu89_1_14_0">
  <span id="formContato_ctl00_rptAba_rptSessao_0_rptCampos_0_ctl00_6">
  </span>
</span>

＆＃13;

items : number[ ] = [ ];

＆＃13;

Answer 1

有多个跨度具有相同的类别。所以它给出了一个错误。

用此脚本替换您的代码。单击Anexo时会打开文件对话框。

       $("#Anexo").click(function() {
           $("#fu89_1_14_0").trigger('click');
       });

       $('#fu89_1_14_0').on('change', function() {
           var val = $(this).val();
           $(this).siblings('span').text(val);
       })

HTML代码

  <span class="Anexo">
   <span class="Anexo">
    <label id="Anexo">Anexo:</label>
    <input type="file" name="ctl00$formContato$ctl00$rptAba$ctl00$rptSessao$ctl00$rptCampos$ctl06$fu89_1_14_0" id="fu89_1_14_0">
    <span id="formContato_ctl00_rptAba_rptSessao_0_rptCampos_0_ctl00_6" style="display:none;">
    </span>
</span>

我怎样才能从输入[type =＆＃34; file＆＃34;]中触发到span标记？

1 个答案: