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

你可以檢查你的代碼隱藏“如果”圖像被刪除。