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

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

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

多谢各位

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

//单击浏览按钮附加文件id并显示附加链接
$（文档）.ready（函数（）{
$（“输入[id^='upload_file']）。每个（函数（）{
var id=parseInt（this.id.replace（“上传文件”）；
$（“#上传_文件”+id）.change（函数（）{
如果（$（“#上传#文件”+id）.val（）！=”）{
$（“#moreImageUploadLink”）.show（）；
}
});
});
var upload_number=2；
$（“#附件”）。单击（函数（）{
//添加更多文件。每次单击attachmore链接都会显示“浏览”按钮，也会附加更多文件。
var moreUploadTag=“”
moreUploadTag+=“上传文件”+上传编号+”；
moreUploadTag+=''；
moreUploadTag+=''；
$（''+moreUploadTag+''）.fadeIn（'slow'）.appendTo（'moreImageUpload'）；
上传_number++；
});
});
函数del_文件（eleId）{
var ele=document.getElementById（“删除文件”+eleId）；
ele.parentNode.removeChild（ele）；
}

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

只需添加这一行即可

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

以前

 upload_number++;

以使“附加更多”按钮触发文件拾取的打开。

---

然后你可以用CSS隐藏输入文件标签。

我看不出你的代码中有什么地方试图打开它。点击input@epascarello不。每次我单击+附加更多，它都会打开浏览按钮。如果您在JSFIDLE上进行了测试，它就不起作用。请帮我解决这个问题。检查这里@Packer我会在JSFIDLE上测试它，如果你做了一个“当我添加那行时，在“附加更多”上，它会打开文件选择器，但不会显示文件名。