JavaScript 上传文件和删除按钮

Question

美好的一天，我正在 asp 页面上工作以上传图像文件并使用 JavaScript 代码对其进行预览，我想添加从 (id="imgpreview") 和文件路径 (ID="FileUploadControl") 中删除图像的“删除按钮”

我的代码

function showpreview(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#imgpreview').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

function showImage() {
  var add = document.createElement('img');
  add.src = ''
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <asp:Label ID="Label5" runat="server" Text="Select File to Upload"></asp:Label>
    </td>
    <td>
      <asp:FileUpload ID="FileUpload1" runat="server" onchange="showpreview(this);" />
      <asp:Label ID="Label4" class="stylelbl" runat="server" Text="File Type : JPG, Max File Size : 500kb">
      </asp:Label>
    </td>
  </tr>
  <tr>
    <td>
      <img id="imgpreview" alt="" src="" />
    </td>
  </tr>
</table>

Answer 1

从您的代码中已经在 javascript 中添加了图像，因此您可以在 html/aspx 中添加“删除图像”按钮。

<input type='button' onclick='removeImg();' value='remove image'>

javascript :

function removeImg() {
    document.getElementById('imgpreview').src = '';
}

你可以检查你的代码隐藏“如果”图像被删除。