选择文件浏览器不适用于使用Jquery或javascript的输入类型文件

Question

我正面临一个问题。使用jquery单击3次后，文件选择资源管理器将关闭。我在下面解释我的代码。

header.html中：

$(document).on('click', '.browse', function(){
    var file = $(this).parent().parent().parent().find('.file');
    file.trigger('click');
});
$(document).on('change', '.file', function(){
   $(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
});
<div class="form-group" style="margin-bottom:0px;">
<input type="file" name="logoimage" id="logoimage" ng-model= "form.logoimage" onchange="angular.element(this).scope().uploadedImage(this);" accept=".gif,.jpg,.jpeg,.png" class="file">
<div class="input-group col-xs-12">
<input type="text" class="form-control" placeholder="Upload Logo" name="setlogoimage" id="setlogoimage" ng-model="setlogoimage">
<span class="input-group-btn">
<button class="browse btn btn-primary" type="button">Upload File</button></span> 
</div>
</div>

以上是我的头文件，它有一个输入类型文件功能。

audit.html：

$(document).on('click', '.browsebtn', function(){
  var file1 = $(this).parent().parent().parent().find('.filepath');
  file1.trigger('click');
  console.log('audit');
});
$(document).on('change', '.filepath', function(){
  $(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
});
<div ng-include src="'header.html'"></div>
<div class="form-group" style="margin-bottom:0px;">
<input type="file" ng-model="form.filencdoc" multiple name="ncevidencefile[]" class="filepath" onchange="angular.element(this).scope().uploadedFile(this,4);">
 <div class="input-group col-xs-12">
 <span class="input-group-addon"><i class="fa fa-file-text-o" aria-hidden="true"></i></span>
<input type="text" style="display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc;" placeholder="Link to Evidences" ng-model="ncshowimp" id="ncshowimp">
 <span class="input-group-btn">
<button class="browsebtn btn btn-primary" type="button" style="border-radius: 0 3px 3px 0" id="browsbttn">Browse</button>
 </span>          
 </div>
</div>

现在让我解释一下这个场景。让我们说从一开始用户在header.html页面，然后点击它重定向到audit.html页面的一些下一个按钮。然后当用户回到header.html并选择输入类型文件来选择文件时，文件浏览器正在打开，但是在点击cancel/select按钮3次之后它正在关闭这是我的问题。

通常它应该一次点击关闭。请帮忙。

Answer 1

您可以使用label元素代替做hacky事情。

https://codepen.io/asim-coder/pen/MryMJM

HTML

<input type="file" id="fileopen" name="fileopen">

<p>Some other things</p>

<label for="fileopen">styled button

</label>

CSS

label {
  border: 1px solid #ddd;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}