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
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] 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]
[code]
@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]
[code]
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
[/code]