php - jquery ajax file upload with progressbar uploading same file multiple times -

i creating media-bank user can upload media files , can reuse later

image,audio , videos can uploaded following options
image upload pc, specify link
audio upload pc, specify link
video upload pc, youtube url, facebook embed code

separate forms created in tabbed layout class="formupload"
upload pc forms has <input type="file" name="file".../>
while other forms has <textarea name="file" ...>

my database table looks like
[id, file, type, src,...]
[1, pic.png, image, pc,...]
[2, http://domin/img.png, image, link,...]

$('body').on('submit','.formupload',function(e){             e.preventdefault();             var pr = $(this).parents('.tabpanes').find('.progressbar');             var lbl = $(this).parents('.tabpanes').find('.percentlabel');             var url = $(this).attr('action');              var data = new formdata();             if($(this).find('#txtfile[type="file"]').length === 1 ){                 data.append('file', $(this).find( '#txtfile' )[0].files[0]);             }else{                 data.append('file', $(this).find('#txtfile' ).val());             }             data.append('type',$(this).find('#txttype').val());             data.append('src',$(this).find('#txtsrc').val());             data.append('title',$(this).find('#txttitle').val());             data.append('tags',$(this).find('#txttags').val());              if($(this).find('#txtfile[type="file"]').length === 1){//if file being uploaded pc                 pr.val(100);                 fileform(url,data,pr,lbl);             }else{//else link provided                 linkform(url,data,pr,lbl);                 pr.val(0);             }              return false;         });   function fileform(url,data,pr,lbl){     `enter code here`$.ajax({         url : url,         type: "post",         data : data,         contenttype: false,         cache: false,         processdata:false,         xhr: function(){             //upload progress             var xhr = $.ajaxsettings.xhr();             if (xhr.upload) {                 xhr.upload.addeventlistener('progress', function(event) {                     var percent = 0;                     var position = event.loaded || event.position;                     var total = event.total;                     if (event.lengthcomputable) {                         percent = math.ceil(position / total * 100);                     }                     pr.val(percent);                 }, false);             }             return xhr;         },         mimetype:"multipart/form-data",     }).done(function(res){ //         frm[0].reset();         lbl.html(res);     }); 

linkform() looks fileform()

the issue when upload image pc uploads same image 3-times time 5-times in folder database.

i debuged , noticed network tab, ajax request php file being sent multiple times.

tried replace jquery code following still same issue time frequency looks reduced

    $('body').on('submit','.formupload',function(e){ e.preventdefault();  //prevent form normal submition  //get progressbar label url_to_hit , form_reference variables used below var pr = $(this).parents('.tabpanes').find('.progressbar'); var lbl = $(this).parents('.tabpanes').find('.percentlabel'); var url = $(this).attr('action'); var frm = $(this);  //populate formdata var data = new formdata(); if(frm.find('#txtfile[type="file"]').length === 1 ){     data.append('file', frm.find( '#txtfile' )[0].files[0]); }else{     data.append('file', frm.find('#txtfile' ).val()); } data.append('type',frm.find('#txttype').val()); data.append('src',frm.find('#txtsrc').val()); data.append('title',frm.find('#txttitle').val()); data.append('tags',frm.find('#txttags').val());  //prepare ajax , callback functions var ajax  = new xmlhttprequest(); ajax.upload.addeventlistener('progress',function(evt){     var percentage = (evt.loaded/evt.total)*100;     pr.val(math.round(percentage));     lbl.html(math.round(percentage)+'% uploaded.'); },false); ajax.addeventlistener('load',function(evt){     lbl.html(evt.target.responsetext);     pr.val(0); },false); ajax.addeventlistener('error',function(evt){     lbl.html('upload failed');     pr.val(0); },false); ajax.addeventlistener('abort',function(evt){     lbl.html('upload aborted');     pr.val(0); },false); ajax.open('post',url); ajax.send(data);  //again stop form submition (optional) return false; });