javascript - 启动文件上传对话框的文本字段：如何获取文件名？

Question

我创建了一个文本字段，单击后会打开一个文件上传对话框。我通过创建第二个可见性的输入标签来做到这一点：隐藏。

我希望在对话框中选择的文件随后显示在文本字段中，但无法使其正常工作。我什至无法通过 jQuery 获取文件名。我错过了什么？

这是我的代码：

$('#import-file-text-field').click(function(){
  $("#import-file-text-field-hidden").trigger("click");
  // $("#import-file-text-field-hidden").show();
  let filename = $('#import-file-text-field-hidden').val();
  var f  = $('input[type=file]').val();
  console.log("File chosen for upload:", filename, f)
});

body { 
 background-color: #aaa;
 font-family: 'Raleway', sans-serif;
 color: #aaa;
}		

.import_list_table {
  width: 380px;
  background-color: #fff;
  margin: 20px;
  border-radius: 10px;
}

.import_list_table td {
  padding-left: 10px;
}

.gray-button {
  text-align: center;
  background-color: #ccc;
  padding: 6px 12px 10px 12px;
  height: 33px;
  width: 162px;
  color: white;
  border-radius: 6px;
  font-size: 13px;
  margin: 0px 10px 15px 0px;
  border: none;
  cursor: pointer;
}

.green-button {
  text-align: center;
  background-color: #b3d450;
  padding: 6px 12px 10px 12px;
  height: 33px;
  width: 162px;
  color: white;
  border-radius: 6px;
  font-size: 13px;
  margin: 0px 10px 15px 10px;
  border: none;
  cursor: pointer;
}

.gray-button:hover, .green-button:hover{
  opacity: .60;
  color: #000;
}

.gray-button:active, .green-button:active{
  opacity: 1.0;
  border: none;
  text-decoration: none;
}

.import-blue-box {
  height: 70px;
  width: 70px;
  background-color: #59a2c8;
  border-radius: 8px;
  position: relative;
}

.import-blue-box .fa-file-image {
  padding-top: 12px;
  padding-left: 16px;
  text-align: center;
  color: white;
}

#import-file-text-field{
  border-radius: 10px;
  height: 32px;
  border: 1px solid #ccc;
  width: 260px;
  line-height: 24px;
  padding-left: 6px;
}

<table class="import_list_table" border=0>
<tr>
  <td colspan="2"><center><h4>Upload a file to import your contact list.</h4></center></td>
</tr>
<tr>
  <td>
    <div class="import-blue-box">
      <i class="far fa-file-image fa-3x"></i>
    </div>
  </td>
<td><br>
  <input type="text" id="import-file-text-field" placeholder="No file chosen">
  <input id="import-file-text-field-hidden" type="file" style="visibility: hidden;"/>
  <br>
</td>
</tr>
<tr>
<td colspan="2">
  <div>
    <br>
    <button type="button" class="gray-button pull-left" id="import_cancel_button" data-dismiss="modal">Cancel</button>
    <button type="button" class="green-button pull-right" id="import_list_button" data-dismiss="modal">Import List</button>
  </div>
</td>
</tr>
</table>
          
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

标签： javascriptjquery

Answer 1

参加change活动并获取文件输入值或files道具。
这是一个简化版本：

var $name = $("#name"),
    $file = $("#file");

$name.on("click", function(){
  $file.trigger("click");
});

$file.on("change", function(e) {
   var data = $file.prop('files')[0];
   
   if(!data) return;
   data.fakepath = $file.val();
   $name.val( data.name );
   console.log( data );
});

<input type="text" id="name" placeholder="No file chosen">
<input id="file" type="file" hidden>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

在普通的 JS 中，它看起来像：

const EL = s => document.querySelector(s),
      EL_name = EL('#name'),
      EL_file = EL('#file');

EL_name.addEventListener("click", () => EL_file.click() );

EL_file.addEventListener("change", () => {
   let data = EL_file.files[0];
   
   if(!data) return;
   data.fakepath = EL_file.value;
   EL_name.value = data.name;
   console.log( data );
});

<input type="text" id="name" placeholder="No file chosen">
<input id="file" type="file" hidden>