Полезная нагрузка файлов Ajax не поступает на php [дубликат]

Полезная нагрузка файлов Ajax не поступает на php [дубликат] ⇐ Php

1 сообщение • Страница 1 из 1

Anonymous

Полезная нагрузка файлов Ajax не поступает на php [дубликат]

Цитата

Сообщение Anonymous » 28 май 2024, 21:07

Я пытаюсь решить проблему в процессе ajax и вернулся к основам.
Я пытаюсь отправить содержимое blob-объекта холста через ajax на какой-нибудь php, но когда я пытаюсь включить файл или большой двоичный объект, я получаю сообщение «Значения сообщений не обнаружены» на стороне php, хотя я вижу полезную нагрузку devtools, указывающую, что элементы были отправлены.
PHP просто:

Код: Выделить всё

и соответствующий HTML-код:

Код: Выделить всё

    const _AJAX_STATUS_OK=200;
//----------------------------------------------------------------------------------
function decodeEntities(html) {
var textarea = document.createElement("textarea");
textarea.innerHTML = html;
return textarea.value;
}
function getScriptName(exQ, exH, fullPath) {
if ( exQ==undefined ) exQ=true;
if ( exH==undefined ) exH=true;
if ( fullPath==undefined ) fullPath=true;
let result=location.href;
if ( exQ && result.indexOf('?')>0 ) result=result.substring(0,result.indexOf('?'));
if ( exH && result.indexOf('#')>0 ) result=result.substring(0,result.indexOf('#'));
if ( ! fullPath ) {
result=result.substring(result.lastIndexOf('/'));
}
return result;
}
function ajax(queryParams, destEl, formData, appendFg, url, postMethod) {
let dp;
let xhr;
let ap = appendFg;

if ( postMethod==undefined ) postMethod='POST';
if ( formData==undefined ) formData=new FormData();
if ( destEl ) dp = destEl;
if ( url==undefined ) url = getScriptName(true, true, true);

if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
else {
console.error("Your browser does not support Ajax");
return;
}

if (postMethod.toUpperCase() === 'GET') {
url = `${url}?${queryParams}`;
}
else if (postMethod.toUpperCase() === 'POST') {
const queryParamsEntries = new URLSearchParams(queryParams).entries();
for (const [key, value] of queryParamsEntries) {
console.log(`Appending ... ${key}=[${value}]`);
formData.append(key, value);
}
for (let [key, value] of formData.entries()) console.log('(pre-send) Resulting form key',key, value);
}
else {
console.error("Invalid action type.  Use 'GET' or 'POST'.");
return;
}

let asyn=true;
xhr.open(postMethod, url, asyn);

// The following block was added but makes no difference.
// Note - for some reason setting ct to "application/x-www-form-urlencoded" for Go3 makes that fail too - hence it's left blank
if ( 1 ) {
//let ct = ""; // "application/x-www-form-urlencoded";
//for (let [key, value] of formData.entries()) {
//    if (value instanceof File && value.size > 0) {
//        ct='multipart/form-data';
//        break;
//    }
//}
//console.log(`Content type: ${ct} `);
//if ( ct!=="" ) xhr.setRequestHeader("Content-Type",ct);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status == _AJAX_STATUS_OK) {
if (xhr.responseText.indexOf('Fatal error') > -1 && doErrorAlerts) alert('process request err:' + xhr.responseText);
let update= new Array();
let respTxt= xhr.responseText;
respTxt = respTxt.replace(/{{BR}}/g, '\n');
respTxt = decodeEntities(respTxt);

if (dp) {
if ( ap ) dp.innerHTML += respTxt;
else dp.innerHTML = respTxt;
}
else {
console.debug('xhr result',respTxt);
console.log('xhr result',respTxt);
document.querySelector('#result').innerHTML+='Done (see console)';
}

}
}
};

if (postMethod.toUpperCase() === 'POST' && formData) {
if ( queryParams ) document.querySelector('#result').innerHTML+=`[*]Sending queryParams:${queryParams}`;
for (let [key, value] of formData.entries()) {
document.querySelector('#result').innerHTML+=`Sending formData(${key})=${value}`;
}
xhr.send(formData);
}
else {
xhr.send();
}
}
// ----------------------------------------------------------
function doTest1() {
document.querySelector('#result').innerHTML='';
ajax("test=1&a=10&b=11", document.getElementById("result"));
}
function doTest2() {
document.querySelector('#result').innerHTML='';
var formData = new FormData();
formData.append('test', '2');
formData.append('a', '1');
formData.append('b', '2');
formData.append('c', '3');
formData.append('d', document.querySelector(`input[type='file']`).files[0]);

ajax(null, document.getElementById("result"), formData, true);
}
function doTest3a() {
document.querySelector('#result').innerHTML='';
doTestX('test=3&a=101', undefined, false);
}
function doTest3b() {
document.querySelector('#result').innerHTML='';
doTestX('test=4&a=102', document.getElementById("result"), false);
}
function doTest4a() {
document.querySelector('#result').innerHTML='';
doTestX('test=4&a=102', undefined, true);
}
function doTest4b() {
document.querySelector('#result').innerHTML='';
doTestX('test=4&a=102', document.getElementById("result"), true);
}
function doTestX(args, out, includeFile) {
const formData = new FormData();
if ( includeFile ) {
let img = document.querySelector('img');
let ft  = 'png';

let canvas    = document.createElement('canvas');
let ctx       = canvas.getContext('2d');
canvas.width  = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);

const dataUrl      = canvas.toDataURL();
const base64Data   = dataUrl.split(',')[1];
const binaryString = atob(base64Data);
const uint8Array   = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length;  i++) {
uint8Array[i] = binaryString.charCodeAt(i);
}
const blob = new Blob([uint8Array], {type: 'image/' + ft});

formData.append('file', blob, 'canvas.' + ft);
}
ajax(args, out, formData, true);
}
function canvasToFile(canvas, fileName, mimeType) {
return new Promise((resolve, reject) => {
canvas.toBlob(function(blob) {
let file = new File([blob], fileName, { type: mimeType });
resolve(file);
}, mimeType);
});
}
window.addEventListener('load', async function(event) {
event.preventDefault();
let img = document.querySelector('img');
let ft  = 'png';

let canvas    = document.createElement('canvas');
let ctx       = canvas.getContext('2d');
canvas.width  = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
document.body.appendChild(canvas);

let file         = await canvasToFile(canvas, 'canvasImage.'+ft, 'image/'+ft);
let dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
let fileInput   = document.getElementById('myfile');
fileInput.files = dataTransfer.files;
});

Код: Выделить всё

#result {
background-color: #d5d5d5;
padding:10px;
}
button {
margin:8px;
}
canvas {
width:25vw;
}
iframe {
border:none;
background-color:lightgrey;
}

Код: Выделить всё

Testing Ajax

[img]/images/test-image.jpg[/img]




Submit form


Go1
Go2 (with file)

Go3 ( /console)
Go3 ( /screen)

Go4 (with img /console)
Go4 (with img /screen)

Полный код можно увидеть на https://onlinephp.io/ c/4677a (но по какой-то причине он не запускается)
Если я нажму кнопку Go1, я увижу, что аргументы попадают в php и отображаются в серой области.
Если я запускаю кнопку Go2 (с файлом), я вижу, что formData построена, но php не видит сообщений.
Я оставил следующий тест в Go3, который не имеет файла и работает нормально.
И тогда у вас есть Go4, который пытается включить файл, и, как и Go2, терпит неудачу.
Я вижу в полезной нагрузке dev-tools, что отправляется файл, тест и a (хотя с подозрительной задержкой перед появлением вкладки полезных данных) - но php ничего из этого не видит/не отражает

Что я здесь делаю не так?
Редактировать примечания:

было высказано предположение, что это похоже на установку типа контента AJAX с простым JavaScript (без JQuery), но, попробовав все эти варианты, я вижу, что это ничего не решает
так и было предположил, что это похоже на Предупреждение: отсутствует граница в данных POST multipart/form-data в Неизвестно в строке 0, и хотя это не имеет отмеченного решения - самые популярные ответы - добавление Content-Type - который я уже рассмотрел и не учел как проблема

Подробнее здесь: https://stackoverflow.com/questions/785 ... ing-at-php

1716919673

Anonymous

Я пытаюсь решить проблему в процессе ajax и вернулся к основам.
Я пытаюсь отправить содержимое blob-объекта холста через ajax на какой-нибудь php, но когда я пытаюсь включить файл или большой двоичный объект, я получаю сообщение «Значения сообщений не обнаружены» на стороне php, хотя я вижу полезную нагрузку devtools, указывающую, что элементы были отправлены.
PHP просто:
[code]
[/code]
и соответствующий HTML-код:


[code]    const _AJAX_STATUS_OK=200;
//----------------------------------------------------------------------------------
function decodeEntities(html) {
var textarea = document.createElement("textarea");
textarea.innerHTML = html;
return textarea.value;
}
function getScriptName(exQ, exH, fullPath) {
if ( exQ==undefined ) exQ=true;
if ( exH==undefined ) exH=true;
if ( fullPath==undefined ) fullPath=true;
let result=location.href;
if ( exQ && result.indexOf('?')>0 ) result=result.substring(0,result.indexOf('?'));
if ( exH && result.indexOf('#')>0 ) result=result.substring(0,result.indexOf('#'));
if ( ! fullPath ) {
result=result.substring(result.lastIndexOf('/'));
}
return result;
}
function ajax(queryParams, destEl, formData, appendFg, url, postMethod) {
let dp;
let xhr;
let ap = appendFg;

if ( postMethod==undefined ) postMethod='POST';
if ( formData==undefined ) formData=new FormData();
if ( destEl ) dp = destEl;
if ( url==undefined ) url = getScriptName(true, true, true);

if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
else {
console.error("Your browser does not support Ajax");
return;
}

if (postMethod.toUpperCase() === 'GET') {
url = `${url}?${queryParams}`;
}
else if (postMethod.toUpperCase() === 'POST') {
const queryParamsEntries = new URLSearchParams(queryParams).entries();
for (const [key, value] of queryParamsEntries) {
console.log(`Appending ... ${key}=[${value}]`);
formData.append(key, value);
}
for (let [key, value] of formData.entries()) console.log('(pre-send) Resulting form key',key, value);
}
else {
console.error("Invalid action type.  Use 'GET' or 'POST'.");
return;
}

let asyn=true;
xhr.open(postMethod, url, asyn);

// The following block was added but makes no difference.
// Note - for some reason setting ct to "application/x-www-form-urlencoded" for Go3 makes that fail too - hence it's left blank
if ( 1 ) {
//let ct = ""; // "application/x-www-form-urlencoded";
//for (let [key, value] of formData.entries()) {
//    if (value instanceof File && value.size > 0) {
//        ct='multipart/form-data';
//        break;
//    }
//}
//console.log(`Content type: ${ct} `);
//if ( ct!=="" ) xhr.setRequestHeader("Content-Type",ct);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status == _AJAX_STATUS_OK) {
if (xhr.responseText.indexOf('Fatal error') > -1 && doErrorAlerts) alert('process request err:' + xhr.responseText);
let update= new Array();
let respTxt= xhr.responseText;
respTxt = respTxt.replace(/{{BR}}/g, '\n');
respTxt = decodeEntities(respTxt);

if (dp) {
if ( ap ) dp.innerHTML += respTxt;
else dp.innerHTML = respTxt;
}
else {
console.debug('xhr result',respTxt);
console.log('xhr result',respTxt);
document.querySelector('#result').innerHTML+='Done (see console)';
}

}
}
};

if (postMethod.toUpperCase() === 'POST' && formData) {
if ( queryParams ) document.querySelector('#result').innerHTML+=`[*]Sending queryParams:${queryParams}`;
for (let [key, value] of formData.entries()) {
document.querySelector('#result').innerHTML+=`Sending formData(${key})=${value}`;
}
xhr.send(formData);
}
else {
xhr.send();
}
}
// ----------------------------------------------------------
function doTest1() {
document.querySelector('#result').innerHTML='';
ajax("test=1&a=10&b=11", document.getElementById("result"));
}
function doTest2() {
document.querySelector('#result').innerHTML='';
var formData = new FormData();
formData.append('test', '2');
formData.append('a', '1');
formData.append('b', '2');
formData.append('c', '3');
formData.append('d', document.querySelector(`input[type='file']`).files[0]);

ajax(null, document.getElementById("result"), formData, true);
}
function doTest3a() {
document.querySelector('#result').innerHTML='';
doTestX('test=3&a=101', undefined, false);
}
function doTest3b() {
document.querySelector('#result').innerHTML='';
doTestX('test=4&a=102', document.getElementById("result"), false);
}
function doTest4a() {
document.querySelector('#result').innerHTML='';
doTestX('test=4&a=102', undefined, true);
}
function doTest4b() {
document.querySelector('#result').innerHTML='';
doTestX('test=4&a=102', document.getElementById("result"), true);
}
function doTestX(args, out, includeFile) {
const formData = new FormData();
if ( includeFile ) {
let img = document.querySelector('img');
let ft  = 'png';

let canvas    = document.createElement('canvas');
let ctx       = canvas.getContext('2d');
canvas.width  = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);

const dataUrl      = canvas.toDataURL();
const base64Data   = dataUrl.split(',')[1];
const binaryString = atob(base64Data);
const uint8Array   = new Uint8Array(binaryString.length);
for (let i = 0; i < binaryString.length;  i++) {
uint8Array[i] = binaryString.charCodeAt(i);
}
const blob = new Blob([uint8Array], {type: 'image/' + ft});

formData.append('file', blob, 'canvas.' + ft);
}
ajax(args, out, formData, true);
}
function canvasToFile(canvas, fileName, mimeType) {
return new Promise((resolve, reject) => {
canvas.toBlob(function(blob) {
let file = new File([blob], fileName, { type: mimeType });
resolve(file);
}, mimeType);
});
}
window.addEventListener('load', async function(event) {
event.preventDefault();
let img = document.querySelector('img');
let ft  = 'png';

let canvas    = document.createElement('canvas');
let ctx       = canvas.getContext('2d');
canvas.width  = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
document.body.appendChild(canvas);

let file         = await canvasToFile(canvas, 'canvasImage.'+ft, 'image/'+ft);
let dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
let fileInput   = document.getElementById('myfile');
fileInput.files = dataTransfer.files;
});[/code]
[code]#result {
background-color: #d5d5d5;
padding:10px;
}
button {
margin:8px;
}
canvas {
width:25vw;
}
iframe {
border:none;
background-color:lightgrey;
}[/code]
[code]Testing Ajax

[img]/images/test-image.jpg[/img]




Submit form


Go1
Go2 (with file)

Go3 ( /console)
Go3 ( /screen)

Go4 (with img /console)
Go4 (with img /screen)


[/code]



Полный код можно увидеть на https://onlinephp.io/ c/4677a (но по какой-то причине он не запускается)
Если я нажму кнопку Go1, я увижу, что аргументы попадают в php и отображаются в серой области.
Если я запускаю кнопку Go2 (с файлом), я вижу, что formData построена, но php не видит сообщений.
Я оставил следующий тест в Go3, который не имеет файла и работает нормально.
И тогда у вас есть Go4, который пытается включить файл, и, как и Go2, терпит неудачу.
Я вижу в полезной нагрузке dev-tools, что отправляется файл, тест и a (хотя с подозрительной задержкой перед появлением вкладки полезных данных) - но php ничего из этого не видит/не отражает
[img]https://i.sstatic.net/1TdITt3L.png [/img]

Что я здесь делаю не так?
Редактировать примечания:
[list]
было высказано предположение, что это похоже на установку типа контента AJAX с простым JavaScript (без JQuery), но, попробовав все эти варианты, я вижу, что это ничего не решает
[*]так и было предположил, что это похоже на Предупреждение: отсутствует граница в данных POST multipart/form-data в Неизвестно в строке 0, и хотя это не имеет отмеченного решения - самые популярные ответы - добавление Content-Type - который я уже рассмотрел и не учел как проблема
[/list] 

Подробнее здесь: [url]https://stackoverflow.com/questions/78545145/ajax-files-payload-not-arriving-at-php[/url]

Ответить Пред. тема След. тема

1 сообщение • Страница 1 из 1

Быстрый ответ

Заголовок:

Имя пользователя:

Изменение регистра текста:

Смайлики

Ещё смайлики…

К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми. Можно прикреплять файлы, перетаскивая их в окно сообщения.

Максимально разрешённый размер вложения: 15 МБ.

Имя файла:

Комментарий к файлу:

Имя файла	Комментарий к файлу	Размер	Статус

Похожие темы

Ответы

Просмотры

Последнее сообщение

API PHP/Google Sheets: необработанное исключение Google\Service\Exception Получена неверная полезная нагрузка JSON. Неиз

Последнее сообщение Anonymous « 15 окт 2024, 17:12
Добавлено в форуме Php

Anonymous » 15 окт 2024, 17:12 » в форуме Php

Я использую PHP для чтения/записи данных в Google Sheet, но получаю сообщение об ошибке: Uncaught Google\Service\Exception Получена неверная полезная нагрузка JSON. Неизвестное имя «0» в data.values .
Я видел много сообщений с одной и той же...

0 Ответы

25 Просмотры

Последнее сообщение Anonymous
15 окт 2024, 17:12
Полезная нагрузка JWT Google Кошелька на PHP

Последнее сообщение Anonymous « 01 ноя 2024, 00:45
Добавлено в форуме Php

Anonymous » 01 ноя 2024, 00:45 » в форуме Php

Я работаю с API Google Кошелька и хотел бы интегрировать функцию createJwtExistingObjects(string $issuerId) из php/demo_eventticket.php в свое решение.
Чтобы воспроизвести объект JWT, я преобразовал это:
{
id : ISSUER_ID.CLASS_ID ,...

0 Ответы

10 Просмотры

Последнее сообщение Anonymous
01 ноя 2024, 00:45
Полезная нагрузка JWT Google Кошелька на PHP

Последнее сообщение Anonymous « 01 ноя 2024, 01:57
Добавлено в форуме Php

Anonymous » 01 ноя 2024, 01:57 » в форуме Php

Я работаю с API Google Кошелька и хотел бы интегрировать функцию createJwtExistingObjects(string $issuerId) из php/demo_eventticket.php в свое решение.
Чтобы воспроизвести объект JWT, я преобразовал это:
{
id : ISSUER_ID.CLASS_ID ,...

0 Ответы

17 Просмотры

Последнее сообщение Anonymous
01 ноя 2024, 01:57
Nginx Spring Boot — 413 (слишком большая полезная нагрузка)

Последнее сообщение Гость « 01 ноя 2023, 15:37
Добавлено в форуме JAVA

Гость » 01 ноя 2023, 15:37 » в форуме JAVA

У меня проблема при загрузке больших изображений, примерно больше 2-х мегабат.

POST net::ERR_FAILED 413 (слишком большая полезная нагрузка)

Я не знаю, в чем проблема.

В настройках Nginx я указал client_max_body_size 100M;

worker_processes...

0 Ответы

68 Просмотры

Последнее сообщение Гость
01 ноя 2023, 15:37
Используйте DataProtection для снятия защиты, выдает "Полезная нагрузка недействительна"

Последнее сообщение Anonymous « 07 ноя 2023, 08:10
Добавлено в форуме C#

Anonymous » 07 ноя 2023, 08:10 » в форуме C#

Я зашифровал строку с помощью .net Framework 4.8:

var dataProtectionProvider = DataProtectionProvider.Create(new DirectoryInfo(@ d:\SharedKeys\ ), builder => { builder.SetApplicationName( myApp ); }); var dataProtector =...

0 Ответы

45 Просмотры

Последнее сообщение Anonymous
07 ноя 2023, 08:10

Вернуться в «Php»