Можно ли из JS передать обработанное изображение в $_FILES?

Question

[Дмитрий]

Делаю обработчик изображений с помощью canvas и возник вопрос, могу ли я обработанное изображение сразу же вернуть в массив $_FILES и уже после отправки формы работать с ним? Сейчас я сделал через временную папку в которую изначально складывается обработанное изображение, а уже после отправки формы из этой папки берутся изображения и производится дальнейшая работа с ними. Но этот вариант не нравится, т.к. нужно постоянно следить за этой папкой (очищать от тех файлов которые небыли отправлены пользователями, потенциально кто нибудь может накидать туда куча файлов).
В общем хотелось бы обойтись без временной папки, а работать через upload_tmp_dir (tmp/php/uploads). Пробовал через upload.php передать в тело input type="hidden" name="my_photo[]" value="'.$_FILES['photo']['tmp_name'].'", но после отправки формы upload_tmp_dir уже пустой.

Вот как сделано сейчас:

$(document).ready(function(){
	$('#uploadItem').change(function(){		
		$.each(this.files, function(i, file) {				
			// тут проверки
			sendResized(file);
		})
		$('#uploadItem').val('');
	});
});

function sendResized(file){
	var reader = new FileReader();
	reader.onload = function() {
		var maxWidth = 1000;
		var tempImg = new Image();
		tempImg.src = reader.result;
		tempImg.onload = function() {			
			var tempW = tempImg.width;
			var tempH = tempImg.height;
			if (tempW > tempH) {
				if (tempW > maxWidth) {
					tempH *= maxWidth / tempW;
					tempW = maxWidth;
				}
			} else {
				if (tempH > maxWidth) {
					tempW *= maxWidth / tempH;
					tempH = maxWidth;
				}
			}
			tempW = Math.round(tempW);
			tempH = Math.round(tempH);

			var canvas = document.createElement('canvas');
			canvas.width = tempW;
			canvas.height = tempH;
			var ctx = canvas.getContext("2d");
			ctx.drawImage(this, 0, 0, tempW, tempH);
			canvas.toBlob(function(blob) { 
				var data = new FormData();
				data.append('photo', blob);
				$.ajax({
					type: 'POST',
					url: 'upload.php',
					data: data,
					cache: false,
					contentType: false,
					processData: false,	
					success: function(html){
						// тут код success
					}
				});
			}, 'image/jpeg', 0.95);	
		}
	}
   reader.readAsDataURL(file);	
}

А в upload.php по простому

// сократил проверки и другие операции
move_uploaded_file($_FILES['photo']['tmp_name'], $dir.$filename.'.jpg';

Comments

[alpeg]

Не используйте readAsDataURL! Вместо него надо использовать FileReader.readAsArrayBuffer().
А если нужна ссылка, например для <img> то нужно создавать её через URL.createObjectURL (и после использования удалять через URL.revokeObjectURL())

Answer 1

[alpeg]

Да, можно.

var data = new FormData();
// вариант 1 (если blob был получен из canvas.toBlob(), то он уже будет иметь правильный mime-type)
data.append("file_field_blob", blob, "filename1.jpg");
// вариант 2
data.append("file_field_file_1", new File([blob], "(будет-проигнорировано).jpg", {type:'image/jpeg'}), "filename2.jpg");
// или так
data.append("file_field_file_2", new File([blob], "filename3.jpg", {type:'image/jpeg'}));
var request = new XMLHttpRequest();
request.onload = function() {
	if (this.status >= 200 && this.status < 400){
		document.write(this.response);
	}
};
request.open("POST", "phpinfo.php");
request.send(data);

Результат:

$_SERVER['HTTP_CONTENT_TYPE'] = multipart/form-data; boundary=--...
$_FILES['file_field_blob'] = Array (
    [name] => filename1.jpg
    [type] => image/jpeg
    [tmp_name] => C:\...\php....tmp
    [error] => 0
    [size] => 46196
)
$_FILES['file_field_file_1'] = Array (
    [name] => filename2.jpg
    [type] => image/jpeg
    [tmp_name] => C:\...\php....tmp
    [error] => 0
    [size] => 46196
)
$_FILES['file_field_file_2'] = Array (
    [name] => filename3.jpg
    [type] => image/jpeg
    [tmp_name] => C:\...\php....tmp
    [error] => 0
    [size] => 46196
)

new File() - https://developer.mozilla.org/en-US/docs/Web/API/F...
FormData - https://developer.mozilla.org/en-US/docs/Web/API/F...

Upd:
Не используйте readAsDataURL! Вместо него надо использовать FileReader.readAsArrayBuffer().
А если нужна ссылка, например для <img> то нужно создавать её через URL.createObjectURL (и после использования удалять через URL.revokeObjectURL())

Comments

[Дмитрий]

Спасибо за ответ, узнал для себя новые фишки! Но это не совсем то что я хотел, или я что то не понимаю. Я хотел чтобы с $_FILES я мог работать после отправки основной формы.

<form action="" method="post">
   <input type="text" name="name" value="">
   <!--тут прочие поля-->
   <input type="files" name="photo" accept="image/*" multiple >
   <button type="submit">Отправить</button>
</form>

Т.е. чтобы после того как я нажал submit я мог работать с $_FILES также как будто я просто воспользовался input type="files". Это как то возможно?

[alpeg]

Дмитрий, я не пойму что ты пытаешься сделать) С $_FILES ты и так работаешь после отправки формы, если файлы, про которые ты говоришь, были в этой форме.

массив $_FILES, как и всё остальное окружение скрипта существует только в момент обработки запроса, скрипт закончился - php удаляет файлы, которые были в $_FILES[*]['tmp_name'].

Если тебе необходимо чтобы была сначала загрузка файлов, а потом отправка основной формы (всё-таки POST нерезиновый, у nginx, apache и php у всех есть ограничение на суммарный размер тела и на количество файлов) - то никакого другого способа, кроме как сохранять куда-нибудь эти файлы, нет.

Для предотвращения злоупотреблений нужно чтобы у пользователя (например в сессии) хранилась инфа о загруженных файлах, и если их многовато - не давать ему грузить ещё. И не давать грузить без регистрации/авторизации.

А файлы просто по дате изменения удалять, если они не были востребованы.

[Дмитрий]

alpeg, я хочу обработать (сжать) изображения из формы до отправки на сервер. Например чтобы пользователь отправив 10 файлов по 3мб не ждал загрузки, и не нагружал сервер. Я думал через js/canvas их сжать и потом вместе с отправкой формы обрабатывать уже через Imagick.

Т.е. последовательность такая:
1) Пользователь заполняет все поля формы, выбирает изображения
2) Они при необходимости уменьшаются на стороне клиента
3) Стандартная отправка формы и работа с ее данными из php (включая работу с уменьшенными на стороне клиента фото)

Я понимаю что моим способом сейчас можно пользоваться, но тогда придется писать скриптик который будет каждые 15/30 минут чекать файла в этой папке по крону и удалять не востребованные (пользователь загрузил файлы, но не отправил форму)

Авторизацию для некоторых вещей не могу сделать, например для отзывов... Там пользователи без регистрации могут написать отзыв и приложить фото.

[alpeg]

Дмитрий,

Я думал через js/canvas их сжать и потом вместе с отправкой формы обрабатывать уже через Imagick.

Я думал ты так и собирался сделать? Ты сжимаешь их через canvas (код у тебя уже есть, только надо поменять на чтение в blob как я комментировал), но вместо отправки на сервер сразу, ты их отправляешь вместе с формой. (только обязательно нужно освободить память от несжатых картинок)

Кстати, очень рекомендую предварительно отправить форму без картинок и на сервере проверить, что с ней всё в порядке (e-mail хороший, капча пройдена, сессия не протухла), и только после этого отправлять уже форму с картинками.

на клиент ещё желательно выдать переменные ini_get('max_file_uploads'), ini_get('upload_max_filesize') и ini_get('post_max_size'), чтобы ты через js не пытался что-то отправить, что сервер не примет.

И последнее - даже если нет регистрации, всегда можно добавить картинки после отправки формы, записав какой-нибудь постоянный ключик автора (вроде трипкода) в сессию (а лучше - в cookies, через которые он сможет потом без доказывания что e-mail его отзыв отредактировать/удалить)

[Дмитрий]

Я думал ты так и собирался сделать? Ты сжимаешь их через canvas (код у тебя уже есть, только надо поменять на чтение в blob как я комментировал), но вместо отправки на сервер сразу, ты их отправляешь вместе с формой.

alpeg, я реально пытался разобраться и не беспокоить Вас, но не могу, помогите пожалуйста.
Сделал как вы написали, и при изменении change() input file на мою страницу действительно приходит массив $_FILES, но при отправке формы он ведь теряется... Пробовал сделать вызов не через change(), а через submit().

Как сделать чтобы при нажатии кнопки Отправить у меня был и $_POST с формы и $_FILES уже обработанный? Или последовательность должна быть какая то иная?
Простите за возможно на Ваш взгляд такие глупые вопросы, но пока опыта не достаточно, я всячески пытаюсь разобраться, сегодня читал доп инфу, но так и не понял что к чему... :'(

[alpeg]

Дмитрий, Вы уже близко!

при изменении change() input file на мою страницу действительно приходит массив $_FILES, но при отправке формы он ведь теряется...

Стоп-стоп-стоп) На .change() мы обрабатываем картинку и сохраняем в простой js-массив обработанный блоб! и НЕ отправляем! А храним до тех пор, пока пользователь не решится отправить форму - что придётся делать через javascript чтобы в FormData-объект добавить их.

[Дмитрий]

alpeg, спасибо, вот теперь понял. Буду пробовать реализовать.

[alpeg]

Дмитрий,
1.php:

echo "\$_POST: \n";
print_r($_POST);
echo "\n\$_FILES: \n";
print_r($_FILES);

index.php:

<style type="text/css">
    #пикчи {display:flex;flex-flow:row wrap;}
    #пикчи > div > img {max-width: 100px;max-height:100px;width:auto;height:auto;}
</style>
<form action="" method="POST" id="form1">
    Имя: <input type="text" name="myname" placeholder="Вася" required>
    <br>Отзыв: <input type="text" name="mytext" placeholder="Чипсы понравились!" required>
    <br>Пикчи: <input type="file" id="uploadItem"/>
    <div>
        Пикчи:
        <div id="пикчи">
        </div>
    </div>
    <button type="submit" id="form1sbm">go</button>
    <pre id="result"></pre>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">
    // https://qna.habr.com/q/787649
    $(document).ready(function () {
        $('#uploadItem').change(function () {
            $.each(this.files, function (i, file) {
                storeResized(file);
            });
            $('#uploadItem').val('');
        });
        var form1 = $('#form1');
        var form1sbm = $('#form1sbm');
        form1.submit(function (event) {
            event.preventDefault();
            if (form1sbm.is(':disabled')) {
                return;
            }
            var valid = form1[0].reportValidity();
            if (!valid) {
                return;
            }

            var data = new FormData();

            // вручную добавляем элементы формы (с чекбоксами всё по-другому)
            data.append("myname", $('#form1 input[name="myname"]').val());
            data.append("mytext", $('#form1 input[name="mytext"]').val());

            $.each(imagesStorage, function (i, v) {
                data.append("pics[]", v.blob, v.name);
            });
            // // вариант 1 (если blob был получен из canvas.toBlob(), то он уже будет иметь правильный mime-тип)
            // data.append("file_field_blob", blob, "filename1.ext");
            // // вариант 2
            // data.append("file_field_file_1", new File([blob], "filename2.ext", {type: 'image/jpeg'}), "filename1.ext");
            // // или так
            // data.append("file_field_file_2", new File([blob], "filename2.ext", {type: 'image/jpeg'}));

            var request = new XMLHttpRequest();
            form1sbm.attr('disabled', true);
            request.onerror = function () {
                // show error?
                $('#result').text(this.response);
                form1sbm.attr('disabled', false);
            };
            request.onload = function () {
                if (this.status >= 200 && this.status < 400) {
                    $('#result').text(this.response);
                    form1sbm.attr('disabled', false);
                    imageRemoveAll();
                } else {
                    // show error?
                    $('#result').text(this.response);
                    form1sbm.attr('disabled', false);
                }
            };
            request.open("POST", "1.php");
            request.send(data);
        });
        var imagesStorage = [];
        var пикчи = $('#пикчи');
        function imageRemoveAll() {
            while (imagesStorage.length > 0) {
                imageRemove(0);
            }
            пикчи.text('');
        }
        function imageRemove(index) {
            var removed = imagesStorage.splice(index, 1)[0];
            URL.revokeObjectURL(removed.localUrl);
            delete removed.blob;
        }
        пикчи.on('click', '.pics-del', function (event) {
            event.preventDefault();
            var pic = $(this).closest('.pics-pic');
            imageRemove(pic.index());
            pic.remove();
        });
        function imageAdd(blob, name) {
            var o = {blob: blob, name: name, localUrl: URL.createObjectURL(blob)};
            imagesStorage.push(o);
            var div = $('<div class="pics-pic">');
            $('<div></div>').text(name + ' ').append($('<button type="button" class="pics-del">&times;</button>')).appendTo(div);
            $('<div></div>').append($('<img>').attr('src', o.localUrl)).appendTo(div)
            div.appendTo(пикчи);
        }
        function lol2() {
            $('#uploadItem2')[0].files
        }
        function storeResized(file) {
            // будем использовать также file.type, file.name
            var reader = new FileReader();
            reader.onload = function () {
                var arrayBuffer = reader.result;

                // File может быть использован вместо Blob!
                // var blob = new Blob([arrayBuffer], {type: file.type});
                var blob = new File([arrayBuffer], file.name, {type: file.type});
                var imageUrl = URL.createObjectURL(blob);
                var once = false;

                var maxWidth = 1000;
                var tempImg = new Image();
                tempImg.src = imageUrl;
                tempImg.onerror = function () {
                    if (once) {
                        return;
                    }
                    once = true;
                    URL.revokeObjectURL(imageUrl);
                    delete arrayBuffer;
                    delete blob;
                };
                tempImg.onload = function () {
                    if (once) {
                        return;
                    }
                    once = true;
                    var tempW = tempImg.width;
                    var tempH = tempImg.height;
                    if (tempW > tempH) {
                        if (tempW > maxWidth) {
                            tempH *= maxWidth / tempW;
                            tempW = maxWidth;
                        }
                    } else {
                        if (tempH > maxWidth) {
                            tempW *= maxWidth / tempH;
                            tempH = maxWidth;
                        }
                    }
                    tempW = Math.round(tempW);
                    tempH = Math.round(tempH);

                    var canvas = document.createElement('canvas');
                    canvas.width = tempW;
                    canvas.height = tempH;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(this, 0, 0, tempW, tempH);
                    canvas.toBlob(function (blob) {
                        imageAdd(blob, file.name);
                    }, 'image/jpeg', 0.95);
                    this.src = '';
                    URL.revokeObjectURL(imageUrl);
                    delete arrayBuffer;
                    delete blob;
                };
            };
            reader.readAsArrayBuffer(file);
        }
    });
</script>

[Дмитрий]

alpeg, нет слов, огромное спасибо!

[Дмитрий]

alpeg, можно еще один вопрос) Может сталкивались, почему то загружая фотку с телефона (iphone) она получается плохого качества (пиксели поехали) и мыльная.
С мылом разобрался вроде через:

ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
ctx.drawImage(this, 0, 0, tempW, tempH);

А вот с плохим качеством нет... Даже не знаю куда копать, с компа все отлично.

Вот пример:
Исходник - 5mb, выбираю при загрузке с iphone качество - оригинальный размер.
1) С компа (без false): https://imgur.com/a/wF2Z0YJ
2) С iphone (без false): https://imgur.com/a/JZfP2Dl
3) С iphone (false): https://imgur.com/a/RR64u97
По рту медведя очень видно...

Наткнулся на похожую проблему - https://github.com/fengyuanchen/cropperjs/issues/372
Но решения для себя не нашел, пробовал так:

ctx.imageSmoothingQuality = 'high';
ctx.webkitImageSmoothingEnabled = 'high';
ctx.imageSmoothingEnabled = true;
ctx.webkitimageSmoothingEnabled = true;
ctx.drawImage(this, 0, 0, tempW, tempH);

Никаких изменений, тоже самое что и без этих строк....

[alpeg]

Дмитрий, я слегка опоздал, но никаких других идей кроме тех, что вы сами в гугле нашли, у меня нет(

в canvas.toBlob передается параметр quality, который 0.95, там можно поставить 1, но и 0.95 должно давать хорошее качество, т.е. визуально разницы не будет между 0.95 и 1.

canvas.toBlob(function (blob) { ... }, 'image/jpeg', 0.95);

Вообще, можно попробовать библиотеку https://github.com/nodeca/pica (выглядит многообещающе)

Answer 2

[Александр N++]

нет. в FILES попадают только инпуты файлов формы

но как вы отправляете данные их нужно ловить через
$rawData = file_get_contents("php://input");
посмотрите примеры как через js ajax отправить в php://input
Скорее всего var data = new FormData(); не нужен будет

Comments

[Дмитрий]

Александр, спасибо за Ваш ответ, но не могли бы Вы чуть подробнее описать схему работы, я не уловил логику/последовательность действий. Еще просто не разу не сталкивался с php://input... Буду очень благодарен!