Programmiererforum

by **Guest** » 13 Jan 2025, 20:10

Ich habe eine Datei-Upload-Datei erstellt, die wie erwartet funktioniert, aber der zweimalige Aufruf auf derselben Seite funktioniert nicht (der zweite Datei-Upload funktioniert nicht). Ich teile hier meinen Beispielcode. Bitte helfen Sie mir dabei ? - Das zweimalige Aufrufen der HTML-Formulare verursacht Probleme beim Hochladen der zweiten Formulardatei.
Ich habe eine Datei zum Hochladen einer Datei erstellt. Sie funktioniert wie erwartet, ein zweimaliges Aufrufen auf derselben Seite jedoch nicht funktioniert (der zweite Datei-Upload funktioniert nicht), ich teile hier meinen Beispielcode. Helfen Sie mir bitte dabei? - Das zweimalige Aufrufen der HTML-Formulare verursacht Probleme beim Hochladen der zweiten Formulardatei.

Code: Select all

    var isAdvancedUpload = function() {
var div = document.createElement('div');
return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
}();

let draggableFileArea = document.querySelector(".drag-file-area");
let browseFileText = document.querySelector(".browse-files");
//    let uploadIcon = document.querySelector(".upload-icon");
//    let dragDropText = document.querySelector(".dynamic-message");
let fileInput = document.querySelector(".default-file-input");
let cannotUploadMessage = document.querySelector(".cannot-upload-message");
let cancelAlertButton = document.querySelector(".cancel-alert-button");
let uploadedFile = document.querySelector(".file-block");
let fileName = document.querySelector(".file-name");
let fileSize = document.querySelector(".file-size");
let progressBar = document.querySelector(".progress-bar");
let removeFileButton = document.querySelector(".remove-file-icon");
//    let uploadButton = document.querySelector(".upload-button");
let fileFlag = 0;

fileInput.addEventListener("click", () => {
fileInput.value = '';
console.log(fileInput.value);
});

fileInput.addEventListener("change", e => {
console.log(" > " + fileInput.value)
//        uploadIcon.innerHTML = 'check_circle';
//        dragDropText.innerHTML = 'File Dropped Successfully!';
document.querySelector(".label").innerHTML = `drag & drop or    browse file`;
//        uploadButton.innerHTML = `Upload`;
fileName.innerHTML = fileInput.files[0].name;
fileSize.innerHTML = (fileInput.files[0].size / 1024).toFixed(1) + " KB";
uploadedFile.style.cssText = "display: flex;";
progressBar.style.width = 0;
fileFlag = 0;
});

//    uploadButton.addEventListener("click", () => {
//        let isFileUploaded = fileInput.value;
//        if (isFileUploaded != '') {
//            if (fileFlag == 0) {
//                fileFlag = 1;
//                var width = 0;
//                var id = setInterval(frame, 50);
//
//                function frame() {
//                    if (width >= 390) {
//                        clearInterval(id);
//                        uploadButton.innerHTML = ` check_circle  Uploaded`;
//                    } else {
//                        width += 5;
//                        progressBar.style.width = width + "px";
//                    }
//                }
//            }
//        } else {
//            cannotUploadMessage.style.cssText = "display: flex; animation: fadeIn linear 1.5s;";
//        }
//    });

cancelAlertButton.addEventListener("click", () => {
cannotUploadMessage.style.cssText = "display: none;";
});

if (isAdvancedUpload) {
["drag", "dragstart", "dragend", "dragover", "dragenter", "dragleave", "drop"].forEach(evt =>
draggableFileArea.addEventListener(evt, e => {
e.preventDefault();
e.stopPropagation();
})
);

["dragover", "dragenter"].forEach(evt => {
draggableFileArea.addEventListener(evt, e => {
e.preventDefault();
e.stopPropagation();
//                uploadIcon.innerHTML = 'file_download';
//                dragDropText.innerHTML = 'Drop your file here!';
});
});

draggableFileArea.addEventListener("drop", e => {
//            uploadIcon.innerHTML = 'check_circle';
//            dragDropText.innerHTML = 'File Dropped Successfully!';
document.querySelector(".label").innerHTML = `drag & drop or    browse file  `;
//            uploadButton.innerHTML = `Upload`;

let files = e.dataTransfer.files;
fileInput.files = files;
console.log(files[0].name + " " + files[0].size);
console.log(document.querySelector(".default-file-input").value);
fileName.innerHTML = files[0].name;
fileSize.innerHTML = (files[0].size / 1024).toFixed(1) + " KB";
uploadedFile.style.cssText = "display: flex;";
progressBar.style.width = 0;
fileFlag = 0;
});
}

removeFileButton.addEventListener("click", () => {
uploadedFile.style.cssText = "display: none;";
fileInput.value = '';
//        uploadIcon.innerHTML = 'file_upload';
//        dragDropText.innerHTML = 'Drag & drop any file here';
document.querySelector(".label").innerHTML = `or   browse file from device  `;
//        uploadButton.innerHTML = `Upload`;
});

Code: Select all

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
.form-container {
width: 100vw;
height: 100vh;
background-color: #7b2cbf;
display: flex;
justify-content: center;
align-items: center;
}
.upload-files-container {
background-color: #f7fff7;
width: 420px;
padding: 30px 60px;
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-shadow: rgba(0, 0, 0, 0.24) 0px 10px 20px, rgba(0, 0, 0, 0.28) 0px 6px 6px;
}
.drag-file-area {
border: 2px dashed #7b2cbf;
border-radius: 40px;
margin: 10px 0 15px;
padding: 30px 50px;
width: 350px;
text-align: center;
}
.drag-file-area .upload-icon {
font-size: 50px;
}
.drag-file-area h3 {
font-size: 26px;
margin: 15px 0;
}
.drag-file-area label {
font-size: 19px;
}
.drag-file-area label .browse-files-text {
color: #7b2cbf;
font-weight: bolder;
cursor: pointer;
}
.browse-files span {
position: relative;
top: -25px;
}
.default-file-input {
opacity: 0;
}
.cannot-upload-message {
background-color: #ffc6c4;
font-size: 17px;
display: flex;
align-items: center;
margin: 5px 0;
padding: 5px 10px 5px 30px;
border-radius: 5px;
color: #BB0000;
display: none;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.cannot-upload-message span, .upload-button-icon {
padding-right: 10px;
}
.cannot-upload-message span:last-child {
padding-left: 20px;
cursor: pointer;
}
.file-block {
color: #f7fff7;
background-color: #7b2cbf;
transition: all 1s;
width: 390px;
position: relative;
display: none;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 10px 0 15px;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
}
.file-info {
display: flex;
align-items: center;
font-size: 15px;
}
.file-icon {
margin-right: 10px;
}
.file-name, .file-size {
padding: 0 3px;
}
.remove-file-icon {
cursor: pointer;
}
.progress-bar {
display: flex;
position: absolute;
bottom: 0;
left: 4.5%;
width: 0;
height: 5px;
border-radius: 25px;
background-color: #4BB543;
}
/*
.upload-button {
font-family: 'Montserrat';
background-color: #7b2cbf;
color: #f7fff7;
display: flex;
align-items: center;
font-size: 18px;
border: none;
border-radius: 20px;
margin: 10px;
padding: 7.5px 50px;
cursor: pointer;
}
*/

Code: Select all



 file_upload 
 Drag & drop any file here 
 or   browse file from device  

 error Please select a file first cancel 

 description   |  
delete







 file_upload 
 Drag & drop any file here 
 or   browse file from device  

 error Please select a file first cancel 

 description   |  
delete

Programmiererforum

Der mehrmalige Aufruf auf der Seite mit den Datei-Upload-Feldern funktioniert nicht wie erwartet

Post a reply

Expand view Topic review: Der mehrmalige Aufruf auf der Seite mit den Datei-Upload-Feldern funktioniert nicht wie erwartet