$(document).ready(function() {
var port = $('.port').css('display','none');
$("#text").change(function () {
port.css('display','block');
$('.uploadIcon').css('display','none');
});
});
var input = document.querySelector("#text");
input.addEventListener("paste",function(event){
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (index in items) {
var item = items[index];
if (item.kind === 'file') {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onload = function(event){
$('#image_upload_preview').attr('src', event.target.result);
$('#exampleInputFileImage').val(event.target.result);
};
reader.readAsDataURL(blob);
}
}
});$(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();
});
<input type="text" id="my-input" name=""/>
<img width="100%" id="my-img" src=""/>
<script type="text/javascript">
window.addEventListener('load', function(e) {
let my_input = document.getElementByID('my-input');
my_input.addEventListener('keyup', function(e){
if( e.keyCode == 13 ){ // ENTER
console.log( my_input.value );
}
});
my_input.addEventListener('paste', function(e) {
let reader = new FileReader();
let pasteData = e.clipboardData.files; // .getData('file'); .getData('text');
// e.originalEvent.clipboardData.types; // Array of Data Types
reader.onload = function (e) {
let raw_data = e.target.result;
$('#my-img').attr('src', raw_data);
}
reader.readAsDataURL( pasteData[0] );
});
});
</script>