+1 vote
by
Good afternoon. 1) User draws a picture on canvas and the program converts it to a png picture. I need this picture to be sent to the server without reloading the page, so it can be later opened on the page of the site using a link.
2) The user records audio. It is sent to the server without reloading the page and then it was also possible to access this audio file via a link.
Please explain and provide the code.
Thank you!!!
by
That's no way to ask questions.
This is not a help desk or a college where you have to be told and "provided" with everything.

This is where they can help. To someone who has tried to do something himself.
Start by searching on the Internet.
by
Vadim Yes, that's roughly what I had in mind. Because only the advent of XMLHttpRequest made it possible to implement asynchronous communication with the server in JS.
by
Pavel Kornilov A wrapper? Rather, it is the implementation of a certain technology. And the wrapper is probably for XMLHttpRequest
by
Please explain and provide the code.

What's there to ask? Demand! =)
fetch is a wrapper for ajax.
by
Vadim , they need to read more. I do not consider the audience of "I only write in JQuery" as programmers. These are ordinary users who decided to put a fancy animation in their project. Therefore, there is no point in explaining to them in detail.
When I have time, and I understand the question, I try to give a ready-made solution in such cases. It's quicker that way.
by
Pavel Kornilov Well, that's up to you, but everyone starts somewhere. And Jquery is a good guide for beginners. Lots of ready-made solutions, documentation, everything is relatively easy and fast.

And then after n-time you catch yourself optimizing your webpack build/trishaking/ui kit/studying virtual house etc. and you think... how did I come to this life xD
by
Pavel Kornilov It's just that there is an opinion among self-trained beginners that ajax does not exist without Jquery or any other library that provides this function. And judging by the way the author asked the question - he just does not understand it. What is ajax and what is fetch. That's why I decided to clarify, see if the author begins to understand a little more :-)
by
wisgest Yes, such transports were also made. But they were quite crunchy. They did work, though.
by
Because only the advent of XMLHttpRequest made it possible to implement asynchronous communication with the server in JS.

Pavel Kornilov No, the classic is a hidden iframe. And even, for example,image allows you to provide feedback to the server without reloading the page.

1 Answer

0 votes
by
I already answered a similar question. Here in the answers is a function for sending blobs to the server:
How do I get the audio file from the site?

If it's about images, you should additionally learn how to get a Blob with Canvas:
https://learn.javascript.ru/blob#izobrazhenie-v-blob
by
Hello again. Tell me in this code, what can be meant by url.
function send_blob_to_server(blob, url) {

var formData = new FormData();
formData.append('file', blob, blob.name);

var xhr = new XMLHttpRequest();
xhr.open('POST', url);

xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
alert('The request was successful, server response: ' + xhr.responseText);
}
else {
alert('An unknown error occurred while executing the query!');
}
}
}

xhr.send(formData);

}

/ To use the function, pass the Blob as the first parameter,
/ and the second parameter is the address where to send your Blob:
send_blob_to_server(audioBlob, ' How do I get the audio file from the site? ');

Is this a link to the php file where the request is processed or what?
by
Anton05 , the second link has an example of how to get a Blob from an image, read it carefully. About move_uploaded_file all right. From the point of view of php you send an ordinary file, it is in the browser it blob, but on the side of php is no different from any other file sent through a form.
by
Anton05 , yes, provide a link to the php-processor.
by
Nadim Zakirov , And in the php file just write move_uploaded_file($_FILES['upfile']['tmp_name'], $destination_dir ), etc.?
You can create a blob from a canvas in the same way as an audio blob.

const blob = new Blob(canvas, {
type: 'image/png'
});
...