文件名和img显示中的问题

Question

我有一个框和一个按钮来选择文件，当我选择文件时，它会显示图片

在我的图片下面，我有一个输入行，我只想显示图片的文件名而不是整个路径名。

所以它必须要做2个功能

所以它仍然在框中显示我的图片，并且只从输入值中的图片中获取文件名？

如果可以这样做，那么我不需要按钮上的文件浏览功能，但是在img中单击它可能会不错，但是如果不能与img单击则可以正常使用

这是我的代码-（具有4个功能和4个方框），但是代码相同，只是名称不同，所以每个方框中得到的图片不同

PasteBin

function previewFeatureFile() {
  var preview = document.querySelector('#feature_prev');
  var file = document.querySelector('#browse').files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
    console.log(reader);
  }
}

function previewFeatureFiles() {
  var preview = document.querySelector('#feature_prevs');
  var file = document.querySelector('#browse1').files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}

function previewFeature1() {
  var preview = document.querySelector('#feature_prev1');
  var file = document.querySelector('#browse2').files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}

function previewFeature2() {
  var preview = document.querySelector('#feature_prev2');
  var file = document.querySelector('#browse3').files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}

function previewFeature3() {
  var preview = document.querySelector('#feature_prev3');
  var file = document.querySelector('#browse4').files[0];
  var reader = new FileReader();
  reader.addEventListener("load", function() {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}

<div class="empty">
  <div class="fill" draggable="true"> </div>
</div><br>
<div class="empty">
  <img id="feature_prev" src="aadrag.png" width="160" height="160" />
  <input id="browse" type="file" onchange="previewFeatureFile()">
</div><br>

<div class="empty">
  <img id="feature_prevs" src="aadrag.png" width="160" height="160" />
  <input id="browse1" type="file" onchange="previewFeatureFiles()">
</div><br>

<div class="empty">
  <img id="feature_prev1" src="aadrag.png" width="160" height="160">
  <input id="browse2" type="file" onchange="previewFeature1()">
</div><br> 

<p>in this part i try to make a onclick on img its open windod but not show the picture in my img then i click done.. </p>

<div class="empty">
  <a href="#" onclick="openFileOption();"><img id="feature_prev2" src="aadrag.png" width="160" height="160" /></a>
  <input id="browse3" type="file" onchange="previewFeature2()">  
  
  <p>here i try to get the filename of the picture in input - i know its wrong but i dont know how i do, so its only for show you what i want to here</p>

  <input id="feature_prev2" type="text" onchange="previewFeature2()">
</div><br>


<div class="empty">
  <img id="feature_prev3" src="aadrag.png" width="160" height="160" />
  <input id="browse4" type="file" onchange="previewFeature3()">
  <span id="previewFeature3()">a</span>
  <input id="feature_prev3" type="text" onchange="previewFeature3()">
</div><br>