JavaScript
0
Вклад в тег
$(document).ready(function(e) {
// показываем картинку. Отменяем события для формы
var port = $('.port').css('display','none');
$("#text").change(function () {
$('#sendFormNews').submit(function(){return false;});
port.css('display','block');
$('.uploadIcon').css('display','none');
});
});
// вешаем слушателя
window.addEventListener('load', function(e) {
// откуда пришла картинка
let input = document.querySelector("#text");
// где показать
let windowPrevImg = document.querySelector('#image_upload_preview');
// наша форма для отправки
let sendFormNews = document.getElementById('sendFormNews');
// функция для страховки
function uploadPasteImage()
{
// еще один слушатель - вешаем на submit - валидим форму один словом. (у меня аякс валидация выше)
sendFormNews.addEventListener('submit',(e) => {
// конвертим нашу строку base64 - говорим что это файл
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
//отдаем результат
return new File([u8arr], filename, {type:mime});
}
// вытягиваем base64 с картинки/прелоада
var pasteImage = windowPrevImg.getAttribute('src');
// скармливаем функции да бы получить нужный нам файл да бы обьяснить серверу что это файл
var file = dataURLtoFile(pasteImage, input.value);
// юзаем FormData https://developer.mozilla.org/ru/docs/Web/API/FormData
// в качестве аргумента передаем нашу форму
var fd = new FormData(sendFormNews);
// ищем нужное нам поле в форму и передаем туда наш полученный файл, который мы получили ранее
fd.append('News[image]',file);
// дальше дело техники
// вызываем
var request = new XMLHttpRequest();
// говорим куда и как
request.open("POST", window.location.href);
// загружаем "если" делай то то
request.onload = function(oEvent) {
window.location.replace("/cabinet/my-news");
} else {
console.log("Error " + request.status + " occurred when trying to upload your file.<br \/>");
}
};
// отправляем
request.send(fd);
});
// события для копирования
input.addEventListener("paste",function(event){
let items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (index in items) {
let item = items[index];
if (item.kind === 'file') {
let blob = item.getAsFile();
let reader = new FileReader();
reader.onload = function(event){
windowPrevImg.setAttribute('src', event.target.result);
};
reader.readAsDataURL(blob);
}
}
});
}
// инициализируем нашу функцию
uploadPasteImage();
});