-1

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.!!

Usman Ali
  • 116
  • 5
  • 1
    Seems to be working okay for me, assuming you're just trying to change the source of the image element. You haven't shown any code that actually uploads anything to the server. Are you just trying to change the source of the image element? If so, are you getting an error in the console? – JoshG Mar 09 '19 at 08:00
  • The code wont "upload". – Lawrence Cherone Mar 09 '19 at 08:01

1 Answers1

0

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.

Ahmed Nasr
  • 109
  • 1
  • 10