JavaScript upload file and remove button

Question

Good day, I am working in asp page for upload image file and preview it by using JavaScript code and I want to add 'remove button' that delete image from (id="imgpreview") and file path ( ID="FileUploadControl")

My code

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>

What is `showImage` supposed to do? – mplungjan Nov 19 '20 at 07:35 — mplungjan, Nov 19 '20 at 07:35

score 1 · Answer 1 · answered Nov 19 '20 at 08:53

1

from your code already add image in javascript, so you may add "remove image" button in your html / aspx.

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

javascript :

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

You may check on your code-behind "if" the image was removed.

answered Nov 19 '20 at 08:53

Flash Ang

192
2
6

Thank you Flash for your help, your code is work only remove 'imgpreview' i want to remove image path from 'FileUpload1'. – iDevelop Nov 19 '20 at 10:07
For 'edit' fileupload, you may refer to this : – Flash Ang Nov 19 '20 at 10:31

JavaScript upload file and remove button

1 Answers1