jquery ajax文件上传，进度条多次上传同一文件

Question

我正在创建媒体库，用户可以上传媒体文件，以后可以重复使用

可以使用以下选项上传图像，音频和视频 从PC上传图片，指定链接
从pc上传音频，指定链接
从pc，youtube url，facebook嵌入代码上传视频

在带有class="FormUpload"的标签式布局中创建单独的表单 upload from pc forms有<input type="file" name="file".../>
而所有其他表格都有<textarea name="file" ...>

我的数据库表看起来像 [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 is being uploaded from pc
                pr.val(100);
                fileForm(url,data,pr,lbl);
            }else{//else link is 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()也看起来像fileForm()

问题是当我从PC上传图像时，它会在文件夹和数据库中将相同的图像上载3次，一次5次。

我发现并注意到网络选项卡，ajax请求到php文件也被多次发送。

尝试通过以下方法替换所有jquery代码，但仍然是相同的问题，但这次频率看起来有所降低

    $('body').on('submit','.FormUpload',function(e){
e.preventDefault();  //prevent form normal submition

//get progressbar label url_to_hit and form_reference into variables to be 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 and 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;
});