当使用 asp.net 和 jquery 的图像预览附近的 X 按钮选择多个文件时，如何从文件上传中删除文件选择

Question

I'm trying to create a site where I can have multiple file upload sections, where the user can upload multiple files. My problem comes from allowing the user to 'remove' a file from the upload list, before it's uploaded.

.aspx

<label for="inputAddress">Select Media</label>
                        <div class="input-group mb-4">
                            <div class="custom-file">
                                <asp:FileUpload ID="ImageUploadsFP" runat="server" AllowMultiple="true" accept="image/*" onchange="ShowImagePreview(this);" class="multi" />
                                <asp:RegularExpressionValidator ID="RegularExpressionValidator1" ValidationExpression="([a-zA-Z0-9\s_\\.\-:])+(.png|.PNG|.JPG|.jpg|.gif|.GIF|.mp4|.MP4|.MPV|.mpv|.mov|.MOV)$"
                                    ControlToValidate="ImageUploadsFP" runat="server" ForeColor="Red" ErrorMessage="Please select a valid image file (.jpg / .png / .gif/ .mp4 / .mpv / .mov)"
                                    Display="Dynamic" />
                            </div>
                        </div>
                        <div class="input-group mb-4">
                            <div id="previewImages">
                                <%--<asp:Image ID="ImgPrv" Height="150px" Width="240px" runat="server" />--%>
                            </div>
                        </div>

These are my jquery codes

<script language= "javascript" type = "text/javascript" >
        $(function () {
            $("[id*=ImageUploadsFP]").change(function () {
                if (typeof (FileReader) != "undefined") {
                    var previewImages = $("#previewImages");
                    previewImages.html("");
                    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png)$/;
                    $($(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", "height:150px;width: 200px");
                                img.attr("src", e.target.result);
                                previewImages.append(img);
                            }
                            reader.readAsDataURL(file[0]);
                        } else {
                            alert(file[0].name + " is not a valid image file.");
                            previewImages.html("");
                            return false;
                        }
                    });

                } else {
                    alert("This browser does not support HTML5 FileReader.");
                }
            });
        });
</script>

How do i create a "X" button with the existing jquery script as I have tried multiple ways but it don't work.

Answer 1

<img id="ImageFile" src="   " alt="Image" style="height:100px; border:1px solid black; border-radius:5px" />

<button type="button" class="btn btn-outline-hover-danger btn-sm" id="DeleteImage">
                    <i class="fa flaticon2-cross"></i>
                </button>

    <script>
$(document).ready(function(){
  $("#DeleteImage").click(function(){
      $("#ImageFile").hide();
      $("#DeleteImage").hide();
  });
});
    </script>