Is it possible to AJAX upload an image to the server and get a link to it after that?

Question

PHP

It's me again! Zdarova
In general, I got confused with likes and with sessions, thanks
But now the question arose, when filling out the form, you also need to upload a photo
Upload files to the server and give it out before it, I can
do it But the need to do this without rebooting forced me to turn to you
I don’t want to google , I am he and there.
Therefore, I ask you
. Can you suggest working examples or tell the mechanism?
Thank you, your g_oo_gle

Answer 1

Karoch had only to ask how the solution came to my mind
Why do I need it at all?
I can make a preview of one photo when I select it anyway.
Therefore, I simply upload the file to the server, put the link to it in the database . The thing was that, in addition to the photo, I had to add a
bunch of information.
everything is decided and entered
Thanks to:

Answer 2

In fact, you cannot send files through ajax directly. But there are plugins that emulate the work of this. For example plupload jQuery-File-Upload . If the photo needs to be sent along with the form, without any previews, crops and other things, then it's best to use jquery form

Answer 3

here is an example from the project:

var form = document.forms.namedItem("fileinfo");

    form.addEventListener('submit', function (e) {

        e.preventDefault();
        var fd = new FormData(form);
        fd.append("action", "upload_diagram_image");
        jQuery.ajax({
            url: base_url,
            type: "POST",
            data: fd,
            enctype: 'multipart/form-data',
            processData: false, // tell jQuery not to process the data
            contentType: false   // tell jQuery not to set contentType
        }).done(function (data) {
            if (data !== 'error') {
                fabric.Image.fromURL(data, function (Img) {
                    canvas.add(Img);
                    canvas.renderAll();
                });
            }
        });

        return false;

    });