Ответы пользователя по тегу JavaScript
  • Можно ли из JS передать обработанное изображение в $_FILES?

    @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())
    Ответ написан