HTML upload directly image

Question

I have a page that will allow users to upload their picture that will act as their profile picture. I have this code:

<form method = "post" action = "" enctype="multipart/form-data">
    <input type = "hidden" name = "size" value = "1000000">
    <input type = "file" name = "image">
    <input type = "submit" name = "upload" value = "Upload Image">
</form>

My php:

if(isset($_POST['upload'])) {
    $target = "profileimgs/".$key.basename($_FILES['image']['name']); 

    $image = $key.basename($_FILES['image']['name']);


    $sql = "UPDATE users SET img = '$image' WHERE idnumber = $idnumber";
    mysqli_query($con,$sql);

    if(move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
        header("Location:home.php");
    } else {
        header("Location:error_uploading.php");
    }
}

By choosing the picture, the only preview that will be shown is the picture's filename. I want to add a "preview" of their chosen image right after they chose the image. Just like when you upload a profile picture on facebook - you choose a picture from your computer, then when you click select picture it automatically upload your picture to the page and gives you a preview to that picture wihout having to click so many buttons.

Is there something I can do to achieve something this?

Yes, there is. What have you tried towards that regard? I see a nice piece of uploading code, but not the preview (what your question is about). A simple search would get you very far already. If you then have any problems, you can ask them here. — Nytrix, Apr 01 '17 at 17:59
Solved here: http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — Hossam, Apr 01 '17 at 18:08
If requirement is to preview image after uploaded you can send file to client from `php` instead of file name, set `iframe` element as `target` of `form` http://stackoverflow.com/questions/168455/how-do-you-post-to-an-iframe/ — guest271314, Apr 01 '17 at 18:18

score 1 · Answer 1 · answered Apr 01 '17 at 18:27

<form id="form1" runat="server">
   <input type='file' id="imgInp" />
   <img id="blah" src="#" alt="your image" />
</form>


<script type="text/javascript">
function readURL(input)
{
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
}

$("#imgInp").change(function(){
    readURL(this);
});
</script>
It will show instead image using javascript base encode. your php code work as well as.

score 0 · Answer 2 · answered Apr 01 '17 at 19:02

0

You can use the Image upload widgets of jasny plugin, there is a beautiful uploader

answered Apr 01 '17 at 19:02

Zakaria

170
1
9

HTML upload directly image

2 Answers2