问题描述
我已经尝试过，并且效果很好。但是问题在于它不是从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 Work
<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","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
$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."
));
}
?>
如果阵列中已有文件，该怎么办。它将再次上传。如果文件在uploadajax()中已经可用，则不应运行filesBuffer函数。
所以请指出我做错了什么地方。
解决方法
<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","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>