为什么输入文件正在缓存旧上传的图像？

Question

I have bootstrap modal popup that pops up to enable user to select images to upload, So when the user chooses images I have javascript function that add new <div> containing the filename, then the user click save to save the images on the database, every thing is working except the input file is caching the old images and uploading them again with the newly selected images.

<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="functionalUpdatePanel">
                <ContentTemplate>
    <button title="إضافة مرفق" data-toggle="modal" class="uploadAttach" data-target="#myModal" ></button>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- 
                labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria- 
                hidden="true"> </button>
                <h4 class="modal-title" id="myModalLabel">إضافة مرفق</h4>
                </div>
                <div class="modal-body">
                <asp:Label ID="lblMessage" runat="server" ForeColor="Green" />                  

                    <h5 style="margin-right:45%;font-weight:bold;font- 
                      size:1.2em">اختر المرفق</h5>             

                    <div class="uploadBtnDiv">


                        <input 
             style="cursor:pointer;opacity:0;width:100%;height:100%"  
                    title="اختيار مرفق" type="file" id="myFile" name="myFile"   
                   multiple="multiple" />

                    </div>      

                    <br />
                    <br />

                </div>
                <div class="modal-footer">

                 <asp:UpdatePanel runat="server" UpdateMode="Conditional">
                                                <ContentTemplate>
                                                    <asp:Button style="width:100% 
                    !important;" Text="حفظ" title="إرسال المرفق" CssClass="btn 
                    btn-success" runat="server" ID="btnUpload" 
                     OnClick="btnUploadClick"      />
                                                 </ContentTemplate>
                                                <Triggers>
                                                    <asp:PostBackTrigger 
                     ControlID="btnUpload" />
                                                </Triggers>
                                            </asp:UpdatePanel>
                </div>
            </div> 
            </div> 
        </div> 
             </ContentTemplate>
                <Triggers>


                </Triggers>
            </asp:UpdatePanel>

and here is my java script function

  $(document).on('change', '#myFile:visible', function() {

    var files = $(this)[0].files;
    var newLine;

    for (var i = 0; i < files.length; i++) {

        newLine = "<div class='attach-line'>" +
                    "<div class='attach-name'>" +

            files[i].name.slice(0,25)+'...' +

            "<i    class='icon-trash remove attach-delete'></i>" +

                    "</div>" +
                      "<br/>"+   
                  "</div>";

        $("#myModal .modal-body").append(newLine);

        // Clone the file selector, assign the name, hide and append it
        $(this).clone().hide().attr('name', 'myFile[]').insertAfter($(this));

      }
      $(".remove").click(function(){
            $(this).parent(".attach-name").remove();
          });
});

and bellow is the code behind

 protected void btnUploadClick(object sender, EventArgs e)
        {

            DataTable dt = new DataTable();
            dt.Columns.Add("AppId", typeof(int));
            dt.Columns.Add("Bytes", typeof(byte[]));
            dt.Columns.Add("ImgNames", typeof(string));
            dt.Columns.Add("ImgType", typeof(string));
            dt.Columns.Add("DedicatedMemberId", typeof(int));


            for (int i = 0; i < Request.Files.Count; i++)
            {
                if (Request.Files[i] != null && Request.Files[i].ContentLength > 0)
                {

                    string fType = Request.Files[i].ContentType.Split('/')[1];
                    string fName = Path.GetFileName(Request.Files[i].FileName);
                    byte[] bytes = new BinaryReader(Request.Files[i].InputStream).ReadBytes(Request.Files[i].ContentLength);
                    dt.Rows.Add(Convert.ToInt32(hfAppId.Value), bytes, fName,
                        fType, Convert.ToInt32(ViewState["memberId"]));
                }
            }
            string outputStr = AppsOperations.UpdateAttach("إرفاق صورة جديدة", "الطلبات ", dt, User.Identity.Name);

            if (outputStr == "s")
            {

                string redirectStr = "AuditApp.aspx?seq=" + hfAttSeq.Value + "&&AppType=" + hfAppType.Value + "&&id=" + hfAppId.Value;
                ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alertMessage", "alert('تم تحميل المرفق بنجاح');window.location='" + redirectStr + "';", true);

            }
            else if (outputStr == "f")

            {

                ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "alertMessage", "alert('" + "تعذر تحميل المرفق" + "')", true);

            }

        }

Answer 1

i am able to find the answer, actually i use the same code in another page to cache images for the use so i removed this the bellow line from java script function

$(this).clone().hide().attr('name', 'myFile[]').insertAfter($(this));