在服务器上上传图像的问题

Question

i am trying to upload an image to the localhost server, but the file is not uploading.when i click on 'upload the image' it does not show anything, i searched a lot about it but i don't know where the problem is.

here is my code

<label id="file1">Upload image
<input onchange="readurl2()" id="input" type="file" name="image" size="60" required>
</label>
<br>
<img id="blah" src="..\images\avatar.png" alt="avatar">

js function

function readurl2() 
{
    input=document.getElementById('input');
    if (input.files && input.files[0]) 
    {
        var reader = new FileReader();
        reader.onload = function (e) 
        {
            document.getElementById('blah').src=e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
        return "done";
    }
}

please help me.!!

Answer 1

FileReader Object reads the file on the front-end, but not uploading your file by itself.

one option to upload you got, is to submit the form and this form should have property: enctype="multipart/form-data"

read there

another option (somehow more advanced) is to post the file in base64 text via ajax request.

Or you may use a library like axios to submit the form as multipart form with the row content of your file input.