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

【问题标题】：select file browser is not working for input type file using Jquery or javascript选择文件浏览器不适用于使用 Jquery 或 javascript 的输入类型文件
【发布时间】：2017-12-20 05:34:20
【问题描述】：

我面临一个问题。使用 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 次后正在关闭，这是我的问题。

通常它应该在一次单击时关闭。请帮忙。

【问题讨论】：

点击3次后浏览器控制台出现一些错误？
@CodeNashor : 没有错误，但是当我点击浏览按钮时，这个 $(document).on('click', '.browse', function(){ var file = $(this).parent().parent().parent().find('.file'); file.trigger('click'); }); 函数正在执行 3 次（或多次），这仅适用于我解释的场景。
您的脚本只是用于打开文件浏览器，对吧？如果那么您可以使用带有“for”属性的“label”标签应用另一种方法来避免任何脚本。对于这两个文件，您可以在“.file”中设置“id”属性。假设这样：然后浏览标签>.
“审计”在控制台登录了多少次？
@AsimKT ：当用户转到该审核页面时，它在当时记录但在其他时间没有记录。

标签： javascript jquery angularjs

【解决方案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;
}

【讨论】：