Spaces:
Sleeping
Sleeping
Update up_fa.html
Browse files- up_fa.html +51 -101
up_fa.html
CHANGED
@@ -87,120 +87,70 @@
|
|
87 |
</form>
|
88 |
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
|
89 |
<script>
|
90 |
-
document.addEventListener('
|
91 |
-
const uploadForm = document.getElementById('uploadForm');
|
92 |
-
if (uploadForm) {
|
93 |
-
uploadForm.addEventListener('submit', function(event) {
|
94 |
event.preventDefault();
|
95 |
-
|
96 |
-
// Проверка наличия файла
|
97 |
-
const fileInput = document.querySelector('input[type="file"]');
|
98 |
-
if (!fileInput || !fileInput.files.length) {
|
99 |
-
console.error("No file selected");
|
100 |
-
Toastify({
|
101 |
-
text: "Please select a file to upload",
|
102 |
-
duration: 3000,
|
103 |
-
gravity: "top",
|
104 |
-
position: "center",
|
105 |
-
backgroundColor: "#FF5733",
|
106 |
-
}).showToast();
|
107 |
-
return;
|
108 |
-
}
|
109 |
-
|
110 |
var formData = new FormData(this);
|
111 |
var request = new XMLHttpRequest();
|
112 |
-
request.open('POST', '/
|
113 |
-
|
114 |
-
// Логирование начала загрузки
|
115 |
-
console.log('Upload started');
|
116 |
-
|
117 |
request.upload.addEventListener('progress', function(event) {
|
118 |
if (event.lengthComputable) {
|
119 |
var percentComplete = (event.loaded / event.total) * 100;
|
120 |
-
|
121 |
-
|
122 |
-
progressBar.style.width = percentComplete + '%';
|
123 |
-
progressBar.innerText = Math.round(percentComplete) + '%';
|
124 |
-
} else {
|
125 |
-
console.error("Element with id 'progressBar' not found");
|
126 |
-
}
|
127 |
}
|
128 |
}, false);
|
129 |
-
|
130 |
request.addEventListener('load', function(event) {
|
131 |
var response = event.target.responseText;
|
132 |
-
|
133 |
-
|
134 |
-
|
135 |
-
|
136 |
-
|
137 |
-
|
138 |
-
|
139 |
-
|
140 |
-
|
141 |
-
imageUrl.setAttribute('data-url', fullUrl);
|
142 |
-
} else {
|
143 |
-
console.error("Element with id 'imageUrl' not found");
|
144 |
-
}
|
145 |
-
|
146 |
-
Toastify({
|
147 |
-
text: "File uploaded successfully",
|
148 |
-
duration: 3000,
|
149 |
-
gravity: "top",
|
150 |
-
position: "center",
|
151 |
-
backgroundColor: "#4CAF50",
|
152 |
-
}).showToast();
|
153 |
-
} else if (event.target.status === 409) {
|
154 |
-
Toastify({
|
155 |
-
text: "File with this name already exists",
|
156 |
-
duration: 3000,
|
157 |
-
gravity: "top",
|
158 |
-
position: "center",
|
159 |
-
backgroundColor: "#FF5733",
|
160 |
-
}).showToast();
|
161 |
-
} else {
|
162 |
-
console.error('Upload failed with status:', event.target.status);
|
163 |
-
}
|
164 |
-
|
165 |
-
const progressBar = document.getElementById('progressBar');
|
166 |
-
if (progressBar) {
|
167 |
-
progressBar.style.width = '0%';
|
168 |
-
progressBar.innerText = '0%';
|
169 |
-
} else {
|
170 |
-
console.error("Element with id 'progressBar' not found");
|
171 |
-
}
|
172 |
}, false);
|
173 |
-
|
174 |
-
request.addEventListener('error', function(event) {
|
175 |
-
console.error('Upload error:', event);
|
176 |
-
});
|
177 |
-
|
178 |
-
request.addEventListener('abort', function(event) {
|
179 |
-
console.error('Upload aborted:', event);
|
180 |
-
});
|
181 |
-
|
182 |
request.send(formData);
|
183 |
});
|
184 |
-
|
185 |
-
|
186 |
-
|
187 |
-
|
188 |
-
|
189 |
-
|
190 |
-
|
191 |
-
|
192 |
-
|
193 |
-
|
194 |
-
|
195 |
-
|
196 |
-
|
197 |
-
|
198 |
-
|
199 |
-
|
200 |
-
|
201 |
-
|
202 |
-
|
203 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
204 |
</script>
|
|
|
205 |
</body>
|
206 |
</html>
|
|
|
87 |
</form>
|
88 |
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
|
89 |
<script>
|
90 |
+
document.getElementById('uploadForm').addEventListener('submit', function(event) {
|
|
|
|
|
|
|
91 |
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
92 |
var formData = new FormData(this);
|
93 |
var request = new XMLHttpRequest();
|
94 |
+
request.open('POST', '/upload');
|
|
|
|
|
|
|
|
|
95 |
request.upload.addEventListener('progress', function(event) {
|
96 |
if (event.lengthComputable) {
|
97 |
var percentComplete = (event.loaded / event.total) * 100;
|
98 |
+
document.getElementById('progressBar').style.width = percentComplete + '%';
|
99 |
+
document.getElementById('progressBar').innerText = Math.round(percentComplete) + '%';
|
|
|
|
|
|
|
|
|
|
|
100 |
}
|
101 |
}, false);
|
|
|
102 |
request.addEventListener('load', function(event) {
|
103 |
var response = event.target.responseText;
|
104 |
+
var fullUrl = response.split('saved to ')[1];
|
105 |
+
var filename = fullUrl.split('/').pop();
|
106 |
+
document.getElementById('imageUrl').innerText = fullUrl;
|
107 |
+
displayMedia(fullUrl);
|
108 |
+
document.getElementById('progressBar').style.width = '0%';
|
109 |
+
document.getElementById('progressBar').innerText = '0%';
|
110 |
+
// Сохранение имени файла и ссылки в локальное хранилище
|
111 |
+
localStorage.setItem('filename', filename);
|
112 |
+
localStorage.setItem('fileUrl', fullUrl);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
113 |
}, false);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
114 |
request.send(formData);
|
115 |
});
|
116 |
+
function displayMedia(url) {
|
117 |
+
var mediaContainer = document.getElementById('mediaContainer');
|
118 |
+
mediaContainer.innerHTML = '';
|
119 |
+
var extension = url.split('.').pop().toLowerCase();
|
120 |
+
if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
|
121 |
+
var img = document.createElement('img');
|
122 |
+
img.src = url;
|
123 |
+
mediaContainer.appendChild(img);
|
124 |
+
} else if (['mp4', 'webm', 'ogg'].includes(extension)) {
|
125 |
+
var video = document.createElement('video');
|
126 |
+
video.src = url;
|
127 |
+
video.controls = true;
|
128 |
+
mediaContainer.appendChild(video);
|
129 |
+
} else if (['mp3', 'wav', 'ogg'].includes(extension)) {
|
130 |
+
var audio = document.createElement('audio');
|
131 |
+
audio.src = url;
|
132 |
+
audio.controls = true;
|
133 |
+
mediaContainer.appendChild(audio);
|
134 |
+
} else {
|
135 |
+
mediaContainer.innerText = 'Unsupported file type';
|
136 |
+
}
|
137 |
+
}
|
138 |
+
function copyToClipboard(element) {
|
139 |
+
var tempInput = document.createElement("input");
|
140 |
+
tempInput.value = element.innerText;
|
141 |
+
document.body.appendChild(tempInput);
|
142 |
+
tempInput.select();
|
143 |
+
document.execCommand("copy");
|
144 |
+
document.body.removeChild(tempInput);
|
145 |
+
Toastify({
|
146 |
+
text: "Ссылка на загруженный файл",
|
147 |
+
duration: 3000,
|
148 |
+
gravity: "top",
|
149 |
+
position: "center",
|
150 |
+
backgroundColor: "#4CAF50",
|
151 |
+
}).showToast();
|
152 |
+
}
|
153 |
</script>
|
154 |
+
|
155 |
</body>
|
156 |
</html>
|