Как отправить картинку методом POST после вставки картинки через ctrl+v?

Добрый день.
Столкнулся с задачей. Попросили сделать такую вещь, есть форма в форме поле для загрузки картинок с прелоадом.
Казалось бы все просто - сделал спору нет.
Дальше попросили сделать так что бы можно было загружать картинку с памяти/буфера обмена. Вот тут задача,
Я организовал вот такой код
$(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);
    }
  }
});


Картинка подгружается с памяти и отображается в прелоаде. Ноо, форма отправки ее не видит. Для того что бы она увидела картинку нужно загрузить картинку через input file тогда все норм.
Но я обхожу это поле и тем самым не могу загрузить картинку
Вопрос, как мне заставить форму увидеть картинку? для бы картинка которая пришла с буфера, зашла на форму?
  • Вопрос задан
  • 2551 просмотр
Решения вопроса 1
Jhon_Light
@Jhon_Light Автор вопроса
Пришел к такому выводу
$(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();
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Короткий ответ - никак, поля типа file являются ридонли, записать в них ничего нельзя.
Длинный ответ - использовать скрытое поле и писать в него бэйс64 строку из прелоадера, на сервере отдельно декодить и сохранять как файл.
Ответ написан
@Timoschenko
Можно вот так.
<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>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы