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
– mplungjan

2020-11-19 07:35:37 +00:00
Commented Nov 19, 2020 at 7:35 — mplungjan
– mplungjan, Commented Nov 19, 2020 at 7:35

Flash Ang · Accepted Answer · 2020-11-19 08:53:46Z

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, 2020 at 8:53

Flash Ang

3023 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

iDevelop Over a year ago

Thank you Flash for your help, your code is work only remove 'imgpreview' i want to remove image path from 'FileUpload1'.

Flash Ang Over a year ago

For 'edit' fileupload, you may refer to this : <stackoverflow.com/questions/19060378/…>

Collectives™ on Stack Overflow

JavaScript upload file and remove button

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related