从 FileList Ajax 上传之前删除文件

Posted 2023-05-09

【中文标题】从 FileList Ajax 上传之前删除文件

【英文标题】：Remove a File before Upload from FileList Ajax Upload

【发布时间】：2020-12-22 05:15:11

【问题描述】：

我试过了，效果很好。但问题是它没有从 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() 函数。

所以请指出我做错了什么。

【问题讨论】：

如果一个文件已经在数组中，它会做什么。它也会再次上传。 => 它没有这样做。它按预期工作。

@AlwaysHelping 不，它正在再次覆盖同一文件。我已经测试了很多。假设：获取一些 MP3 文件并重命名其中一个。输入这个名字“8-BABAR ZAMAN - 301-SOLO-LYRICAL-6 YEARS AND UNDER.mp3”并尝试上传。预期是，在上传。应该上传所有其他文件而不是这个文件。因为这个是来自array filesBuffer 可以这样测试吗

【参考方案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>