選擇文件瀏覽器不適用於使用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並選擇輸入類型文件以選擇文件時，文件瀏覽器正在打開，但是3次單擊“ cancel/select按鈕后它正在關閉，這是我的問題。

通常，它應一次單擊關閉。 請幫忙。

Answer 1

您可以使用label元素來做一些棘手的事情。

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