Preview Image with Delete Button before upload using jQuery

nauna
 
on Jul 20, 2022 04:27 AM
Sample_314313.zip
1404 Views

hello,

I have this JavaScript, so i select multiple images in FileUpload it shows preview of that image in below div.

I want cross button in div so user can remove images from preview also if not need.

<script type="text/javascript">
    $(function () {
        $('[id*=fuUpload1]').change(function () {
            if (typeof (FileReader) != "undefined") {
                var dvPreview = $("[id*=dvPreview]");
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                $($(this)[0].files).each(function () {
                    var file = $(this);
                    if (regex.test(file[0].name.toLowerCase())) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var img = $("<img />");
                            img.attr("style", "max-height:250px;width: 150px");
                            img.attr("src", e.target.result);
                            dvPreview.append(img);
                        }
                        reader.readAsDataURL(file[0]);
                    } else {
                        alert(file[0].name + " is not a valid image file.");
                        dvPreview.html("");
                        return false;
                    }
                });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });
    });
</script>

 

<div id="dvPreview"></div> 
<asp:FileUpload ID="fuUpload1" runat="server" multiple="multiple" /> 

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 20, 2022 10:16 AM
on Jul 20, 2022 10:18 AM

Hi nauna,

Refer below sample. You can remove the preview but not the uploaded file from file upload control.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=fuUpload1]').change(function () {
            if (typeof (FileReader) != "undefined") {
                var dvPreview = $("[id*=dvPreview]");
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                $($(this)[0].files).each(function () {
                    var file = $(this);
                    if (regex.test(file[0].name.toLowerCase())) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            var img = $("<img />");
                            img.attr("style", "max-height:250px;width: 150px");
                            img.attr("src", e.target.result);
                            var div = $("<div style='float:left;' />");
                            $(div).html("<span style='float:right;' class='closeDiv'>X<span>");
                            div.append(img);

                            dvPreview.append(div);
                        }
                        reader.readAsDataURL(file[0]);
                    } else {
                        alert(file[0].name + " is not a valid image file.");
                        dvPreview.html("");
                        return false;
                    }
                });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });

        $('body').on('click', '.closeDiv', function () {
            $(this).closest('div').remove();
        });
    });
</script>
<input name="fuUpload1" id="fuUpload1" type="file" multiple="multiple" />
<div id="dvPreview"></div>

Demo