Чат с демонстрацией загружаемых файлов без предварительной загрузки на сервер и ссылки на Youtube видео
Автор: © web-rubik
3372 Просмотры
0 Понравилось
Скрипт чата с демонстрацией загружаемых файлов и видео из Youtube без предварительной загрузки на сервер. Давайте разберёмся в этом подробнее и попробуем осуществить показ загружаемых файлов или ссылку на Youtube видео перед загрузкой на сервер.
Для начала HTML код самой формы:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Чат с демонстрацией загружаемых файлов</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.min.js"></script>
</head>
<body>
<?php if (isset($_SESSION['msg'])) { ?>
<div id="msg"><?=$_SESSION['msg']?></div>
<?php unset($_SESSION['msg']); } ?>
<script> $(function hideDiv(){ $('#msg').delay(5000).fadeOut(); }) </script>
<div class="myPage">
<h3>Chat:</h3>
<form id="uploadFileChat"
action="handler/scriptHandler.php"
method="post"
onSubmit="return validateDemoFile();"
enctype="multipart/form-data">
<input name="return" type="hidden" value="<?=$_SERVER['REQUEST_URI']?>">
<input id="info" name="info" type="hidden" value="">
<input id="youtube" name="youtube" type="hidden" value="">
<textarea id="textChat" name="text" style="width:100%;" rows="2"></textarea>
<span id="output"></span>
<span id="output2"></span>
<div id="error" style="display:none; color:#F00; margin-bottom:5px;" role="alert">
<strong>Ошибка!</strong><span id="errorText"></span>
</div>
<label for="uploadFile" class="customFileUpload"><i class="fa fa-paperclip"></i> Прикрепить</label>
<input name="chat" type="submit" class="customFileUpload" value="Рассказать">
<input id="uploadFile" type="file" name="file" style="visibility:hidden; font-size:0px;">
</form>
</div>
<script src="js/validate.js"><!----- Валидация --></script>
<script src="js/demoFile.js"><!----- Демонстрация файлов перед загрузкой --></script>
<script src="js/demoYoutube.js"><!-- Демонстрация видео из youtube перед загрузкой --></script>
</body>
</html>В область HEAD мы подключили CSS стили и библиотеку JQUERY.
href="css/style.css"
href="css/style.css"
src="js/jquery.min.js"
В самой форме, мы указали на валидацию.
onSubmit="return validateDemoFile();"
Перед закрывающем тэгом BODY подгрузили JS скрипты, которые будут осуществлять валидацыю, демонстрацию загружаемых файлов и ссылку на Youtube видео перед загрузкой на сервер.
src="js/validate.js"
src="js/demoFile.js"
src="js/demoYoutube.js"
Теперь попробую это коротко описать.
В файле validate.js всё просто, проверяет, отправляет пользователь что-нибудь на сервер или нет.
// Валидация
function validateDemoFile() {
var textChat = document.getElementById("textChat").value;
var uploadFile = document.getElementById("uploadFile").value;
if (textChat + uploadFile == "") {
$("#error").fadeIn(2000);
$("#errorText").text(" Укажите что у Вас нового..");
return false; }
else {
textChat.style.border = "1px solid #4F52BA";
$("#error").fadeOut(200); }
}В файле demoFile.js мы вначале проверяем на вес загружаемый файл, а потом, используя существующего MIME файл, подгружаем его.
<!-- Демонстрация файлов перед загрузкой -->
function handleFileSelect(evt) {
var file = evt.target.files; // Объект списка файлов
var f = file[0];
if (f.size > 25000000) { // Допускаются файлы не более 25mb
document.getElementById("uploadFile").value = "";
$("#error").fadeIn(2000);
$("#errorText").text("Загружаемый файл не должен превышать 25000000kb, Ваш: " + f.size + "kb");
}
else if (f.type.match('image.*')) { // Обрабатывать только файлы изображений
var reader = new FileReader();
// Закрытие для захвата информации о файле
reader.onload = (function(theFile) {
if (document.getElementById('output').innerHTML != "") { document.getElementById('output').innerHTML = ""; }
return function(e) { // Визуализировать миниатюру
var span = document.createElement('span');
span.innerHTML = ['изображение: ',escape(theFile.name),'<img class="video" style="margin-bottom:5px;" src="', e.target.result, '" />'].join('');
document.getElementById('output').insertBefore(span, null);
document.getElementById('info').value = "image";
};
})(f);
reader.readAsDataURL(f); // Считывается в файле изображения как URL-адрес данных
}
else if (f.type.match('audio.*')) { // Обрабатывать только аудио файлы
var reader = new FileReader();
reader.onload = (function(theFile) { // Закрытие для захвата информации о файле
if (document.getElementById('output').innerHTML != "") { document.getElementById('output').innerHTML = ""; }
return function(e) { // Визуализировать миниатюру
var span = document.createElement('span');
span.innerHTML = ['аудио: ',escape(theFile.name),'<br><audio controls src="', e.target.result, '"></audio><br>'].join('');
document.getElementById('output').insertBefore(span, null);
document.getElementById('info').value = "audio";
};
})(f);
reader.readAsDataURL(f); // Считывается в файле аудио как URL-адрес данных
}
else if (f.type.match('video.*')) { // Обрабатывать только видео файлы
var reader = new FileReader();
reader.onload = (function(theFile) { // Закрытие для захвата информации о файле
if (document.getElementById('output').innerHTML != "") { document.getElementById('output').innerHTML = ""; }
return function(e) { // Визуализировать миниатюру
var span = document.createElement('span');
span.innerHTML = ['видео: ',escape(theFile.name),'<video class="video" controls src="', e.target.result, '"></video>'].join('');
document.getElementById('output').insertBefore(span, null);
document.getElementById('info').value = "video";
};
})(f);
reader.readAsDataURL(f); // Считывается в файле видео как URL-адрес данных
}
else { alert("Недопустимый файл для загрузки.."); }
}
document.getElementById('uploadFile').addEventListener('change', handleFileSelect, false);В файле demoYoutube.js мы на потере фокуса создаём массив из введённых слов и если находим что то похоже на https://youtu.be/vJWZNfftRkY, мы вставляем этот адрес в IFRAME и демонстрируем.
<!-- Демонстрация Youtube видо перед загрузкой -->
function searchUrl(textChat) {
var check = /^(?:https?://)?(?:(?:www.)?youtube.com/watch?v=|youtu.be/)(w+)$/;
var arrays = textChat.split(' ', );
arrays.forEach((array) => {
if (!check.test(array) == false) {
if (document.getElementById('output2').innerHTML != "") { document.getElementById('output2').innerHTML = ""; }
var checkUrl = /^.*(youtu.be/|v/|u/w/|embed/|watch?v=|&v=)([^#&?]*).*/;
var match = array.match(checkUrl);
var span = document.createElement('span');
span.innerHTML = ['видео из youtube: <iframe class="video" src="https://www.youtube.com/embed/' + match[2] + '" frameborder="0" allowfullscreen></iframe>'].join('');
document.getElementById('output2').insertBefore(span, null);
document.getElementById('youtube').value = match[2];
}
});
}
document.getElementById("textChat").onblur = function() { searchUrl(document.getElementById("textChat").value); }Ну и на последок, если всё на JS прошло успешно и была нажата кнопка РАССКАЗАТЬ, мы переходим в PHP обработчик scriptHandler.php который я положил в исходниках.
На этом всё, что не понятно пишите в комментариях..
Комментариев нет или
Оставить комментарий
Оставленные комментарии проверяются технической частью интернет портала Web-rubik.ru