#jquery #file #jquery-file-upload
#jquery #файл #jquery-загрузка файла
Вопрос:
Я пробовал, и это сработало хорошо. Но проблема в том, что файл не удаляется из списка загрузки, который уже доступен в 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 resu<
}
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."
));
}
?>
Что он делает, если файл уже в массиве. Он также загружает это снова. не следует запускать uploadajax() функцию, если файл уже доступен в filesBuffer .
Поэтому, пожалуйста, укажите мне, где я делаю неправильно.
Комментарии:
1. Что он делает, если файл уже в массиве. Он также загружает это снова. => он этого не делает. Он работает так, как ожидалось.
2. @AlwaysHelping нет, он перезаписывает тот же файл снова. я много тестировал. Предположим: возьмите несколько файлов MP3 и переименуйте один из них. Введите это имя «8-BABAR ZAMAN — 301-SOLO-LYRICAL-6 ЛЕТ И МЛАДШЕ.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 resu<
}
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>