无法隐藏文件附件浏览按钮

Question

我在电子邮件中发送附件，而发送用户实际上可以添加多个附件。我的代码每次都会继续显示浏览按钮。我想只显示一个按钮，让用户打开任何附件的文件选择器。 请告诉我我的代码有什么问题。 另见附图。这是我不想要的行为。

我想要的是点击附加更多按钮，它应该自动打开文件选择器。目前正在显示

谢谢。

<div class="col-sm-10">
              <div class="element">
                <label>Attachment</label>
                <span class="upload_file_button"><input type="file" name="upload_file1" id="upload_file1"/></span>
                </div>
                <div id="moreImageUpload"></div>
                <div id="moreImageUploadLink" style="display:none;margin-left: 10px;">
                <a href="javascript:void(0);" id="attachMore" class="fa fa-plus"> Attach More</a>
                </div>
            </div>
          </div>
        </div>

的javascript

<script type="text/javascript">
// onclick browse button attach the file id and show the attachmore link

$(document).ready(function() {
  $("input[id^='upload_file']").each(function() {
  var id = parseInt(this.id.replace("upload_file", ""));
  $("#upload_file" + id).change(function() { 
   if ($("#upload_file" + id).val() != "") {
   $("#moreImageUploadLink").show();
   }
  });
});
var upload_number = 2;
$('#attachMore').click(function() {
//add more file. Everytime clicking on attachmore link show the browse button also attach more as well.
var moreUploadTag = ''
 moreUploadTag += '<div class="element"><label for="upload_file"' + upload_number + '>Upload File ' + upload_number + '</label>';
 moreUploadTag += '<span class="upload_file_button"><input type="file" id="upload_file' + upload_number + '" name="upload_file' + upload_number + '"/></span>';
 moreUploadTag += '&nbsp;<a href="javascript:del_file(' + upload_number + ')" style="cursor:pointer;" onclick="return confirm(\"Are you really want to delete ?\")">Delete ' + upload_number + '</a></div>';
 $('<dl id="delete_file' + upload_number + '">' + moreUploadTag + '</dl>').fadeIn('slow').appendTo('#moreImageUpload');
 upload_number++;
 });
});

function del_file(eleId) {
 var ele = document.getElementById("delete_file" + eleId);
 ele.parentNode.removeChild(ele);
}
</script>

点击 +附加更多，即显示浏览按钮。相反，我想在点击 +附加更多后立即打开文件选择器。

Answer 1

只需添加此行

即可

$('#upload_file'  + upload_number).trigger('click');

之前

 upload_number++;

为了让“附加更多”按钮触发打开文件拾取。 然后你可以用CSS隐藏输入文件标签。