CODEWITHSUNDEEP
javascriptjqueryasp.net
Nitika Chopra
Nitika Chopra

Reputation: 1405

how to remove a preview image only one before upload in asp.net c#

This code is to preview image and I want to remove a preview image one of the many and remaining images still there before upload.

 <script src="//code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function ShowImagePreview(input) {
        if (input.files && input.files.length > 0) {
            for (var i = 0 ; i < input.files.length; i++) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#imgViewer').append($('<img>', { src: e.target.result, width: '50px', height: '50' }));

                };
                reader.readAsDataURL(input.files[i]);
            }
        }
        }
</script>

Upvotes: 0

Views: 1111

Answers (1)

M. Adeel Khalid
M. Adeel Khalid

Reputation: 1796

Instead of doing this using your code, there is an alternative for what you want. You just need to do it with the help of JQuery MultiFile, download it and reference on the page where you are going to upload files, you need to select one file at a time, before uploading you can browse multiple files and cancel whatever file you want. Complete code would be like this:

Reference of MultiSelect JQuery:

<script src="Scripts/jquery.MultiFile.js"></script>

.aspx code:

<asp:FileUpload ID="FileUpload1" runat="server" class="multi" />
<br />
<asp:Button ID="Upload" runat="server" Text="Upload Images"
        onclick="Upload_Click"/>

.cs code:

    protected void Upload_Click(object sender, EventArgs e)
    {
      HttpFileCollection hfc = Request.Files;
      for (int i = 0; i < hfc.Count; i++)
      {
        HttpPostedFile hpf = hfc[i];
        if (hpf.ContentLength > 0)
        {
          hpf.SaveAs(Server.MapPath("MyFiles") + "\\" +
          System.IO.Path.GetFileName(hpf.FileName));
          Response.Write("<b>File: </b>" + hpf.FileName + " <b>Size:</b> " +
                            hpf.ContentLength + " <b>Type:</b> " + hpf.ContentType + " Uploaded Successfully <br/>");
        }
     }
   }

Sample

It is a tested code, it works perfectly to address your problem.

Hope it helps!

Upvotes: 1

Related Questions