从 FileList Ajax 上传前删除文件

Question

我试过了，效果很好。但问题是它没有从 Array 中已经可用的上传列表中删除文件这是HTML代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input type="file" id="multiupload" name="uploadFiledd[]" webkitdirectory multiple >
<button type="button" id="upcvr" class="btn btn-primary">Start Upload</button>
<div id="uploadsts"></div>

这是Jquery工作

    <script>
//This is the array or list of file names which are already available. If I select the same name file again, It will match. If Matched, remove that selected file

var filesBuffer = ["8-BABAR ZAMAN - 301-SOLO-LYRICAL-6 YEARS AND UNDER.mp3", "545-1 CHARLI MUSCAT - SC_106 8 U REST HIP HOP.mp3", "545-1 CHARLI MUSCAT - SC_106 8 U REST HIP HOP.mp3", "530-1 CHARLI MUSCAT - SC_100 8 U COMBINED STRAIGHT WALTZ TAP.mp3", "1-ZOE CAMPBELL - 294-SOLO-CLASSICAL-6 YEARS AND UNDER.mp3", "10-ZOE CAMPBELL - 306-SOLO-TAP-6 YEARS AND UNDER.mp3"];

function findValueInArray(value,arr){
  var result = "0";
 
  for(var i=0; i<arr.length; i++){
    var name = arr[i];
    if(name == value){
      result = '1';
      break;
    }
  }

  return result;
}

function uploadajax(ttl,cl){

    var fileList = $('#multiupload').prop("files");
    $('#prog'+cl).removeClass('loading-prep').addClass('upload-image');

    var form_data =  "";

    form_data = new FormData();
    form_data.append("upload_image", fileList[cl]);


    var request = $.ajax({
              url: "uppps.php",
              cache: false,
              contentType: false,
              processData: false,
              async: true,
              data: form_data,
              type: 'POST', 
              xhr: function() {  
                  var xhr = $.ajaxSettings.xhr();
                  if(xhr.upload){ 
                  xhr.upload.addEventListener('progress', function(event){
                      var percent = 0;
                      if (event.lengthComputable) {
                          percent = Math.ceil(event.loaded / event.total * 100);
                      }
                      $('#prog'+cl).text(percent+'%') 
                   }, false);
                 }
                 return xhr;
              },
              success: function (res, status) {
                  if (status == 'success') {
                      percent = 0;
                      $('#prog' + cl).text('');
                      $('#prog' + cl).text('--Success: ');
                      if (cl < ttl) {
                          uploadajax(ttl, cl + 1);
                      } else {
                          alert('Done');
                      }
                  }
              },
              fail: function (res) {
                  alert('Failed');
              }    
          })
    }

    $('#upcvr').click(function(){
        var fileList = $('#multiupload').prop("files");
        $('#uploadsts').html('');
        var i;
        for ( i = 0; i < fileList.length; i++) {
            var FileName = fileList[i].name;
            var chk = findValueInArray(FileName, filesBuffer);
        if(chk == 0){
            $('#uploadsts').append('<p class="upload-page">'+FileName+'<span class="loading-prep" id="prog'+i+'"></span></p>');
        }else{
             $('#uploadsts').append('<p class="upload-page" style="color:green;">'+FileName+'<span class="loading-prep" id="ssprog'+i+'"> This file exists in FileBuffer</span></p>');
        }
            
        if(chk == 0){
                uploadajax(fileList.length,0);
        }else{
            alert('This File Already Exist');
        }
            
         }
    });
</script>

这里是 PHP 代码。

<?php 
$target_dir = "TestUploads/";
$target_file = $target_dir . basename($_FILES["upload_image"]["name"]);
if (move_uploaded_file($_FILES["upload_image"]["tmp_name"], $target_file)) {
header("Content-Type:application/json");
echo json_encode(
array(
"status"=>1,
"message"=>"The file ". $target_file. " has been uploaded."
));
} else {
header("Content-Type:application/json");
echo json_encode(
array("status"=>0,
"message"=>"Sorry, there was an error uploading your file."
));
}
?>

如果数组中已有文件，它会做什么。它也会再次上传。如果文件在 filesBuffer.

中已经可用，则不应运行 uploadajax() 函数

所以请指出我哪里做错了。

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input type="file" id="multiupload" name="uploadFiledd[]" webkitdirectory multiple >
<button type="button" id="upcvr" class="btn btn-primary">Start Upload</button>
<div id="uploadsts"></div>

<div id="par_tag" style="background-color:red;"></div>
<script>
//This is the array or list of file names which are already available. If I select the same name file again, It will match. If Matched, remove that selected file

var filesBuffer = ["2.jpg", "545-1 CHARLI MUSCAT - SC_106 8 U REST HIP HOP.mp3", "545-1 CHARLI MUSCAT - SC_106 8 U REST HIP HOP.mp3", "530-1 CHARLI MUSCAT - SC_100 8 U COMBINED STRAIGHT WALTZ TAP.mp3", "1-ZOE CAMPBELL - 294-SOLO-CLASSICAL-6 YEARS AND UNDER.mp3", "10-ZOE CAMPBELL - 306-SOLO-TAP-6 YEARS AND UNDER.mp3"];

function findValueInArray(value,arr){
  var result = "0";
 
  for(var i=0; i<arr.length; i++){
    var name = arr[i];
    if(name == value){
      result = '1';
      break;
    }
  }

  return result;
}

function uploadajax(cl){

    var fileList = $('#multiupload').prop("files");
    $('#prog'+cl).removeClass('loading-prep').addClass('upload-image');

    var file_name = fileList[cl].name;
    var form_data =  "";

    form_data = new FormData();
    form_data.append("upload_image", fileList[cl]);


    var request = $.ajax({
              url: "uppps.php",
              cache: false,
              contentType: false,
              processData: false,
              async: true,
              data: form_data,
              type: 'POST', 
              xhr: function() {  
                  var xhr = $.ajaxSettings.xhr();
                  if(xhr.upload){ 
                  xhr.upload.addEventListener('progress', function(event){
                      var percent = 0;
                      if (event.lengthComputable) {
                          percent = Math.ceil(event.loaded / event.total * 100);
                      }
                      $('#prog'+cl).text(percent+'%'); 
                      $('#par_tag').append('File: '+file_name+ ' is uploaded <br>' ); 
                      
                   }, false);
                 }
                 return xhr;
              },
              success: function (res, status) {
                  if (status == 'success') {
                     // alert('working');
                      percent = 0;
                      $('#prog' + cl).text('');
                      $('#prog' + cl).text('--Success: ');
                      
                  }
              },
              fail: function (res) {
                  alert('Failed');
              }    
          })
    }

    $('#upcvr').click(function(){
        var fileList = $('#multiupload').prop("files");
        $('#uploadsts').html('');
        var i;
        for ( i = 0; i < fileList.length; i++) {
            var FileName = fileList[i].name;
            var chk = findValueInArray(FileName, filesBuffer);
        if(chk == 0){
            $('#uploadsts').append('<p class="upload-page">'+FileName+'<span class="loading-prep" id="prog'+i+'"></span></p>');
        }else{
             $('#uploadsts').append('<p class="upload-page" style="color:green;">'+FileName+'<span class="loading-prep" id="ssprog'+i+'"> This file exists in FileBuffer</span></p>');
        }
            
        if(chk == 0){
                uploadajax(i);
        }else{
            //alert('This File Already Exist');
        }
            
         }
    });
</script>

从 FileList Ajax 上传前删除文件

Remove a File before Upload from FileList Ajax Upload

jquery

file

jquery-file-upload