Upload Image using javascript in php

Question

------------------- uploadimage.php file ------------

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <title>Upload Images</title>

<script>

/////This Function Show The Details OF Selected File

function fileselected()
        {

            var file=document.getElementById("photo").files[0];            
            document.getElementById("filename").innerHTML=file.name;
            document.getElementById("filesize").innerHTML=file.size;
            document.getElementById("filetype").innerHTML=file.type;
        }

////////When Upload the image upload.php file is call but $_FILES is Empty             

function uploadImage()
        {

            var fd=new FormData();
            fd.append("photo",document.getElementById("photo").files[0]);

            var xmlhttp = new XMLHttpRequest();
            xmlhttp.upload.addEventListener("progress", uploadProgress, false);                
            var url = "http://localhost/JSONProgram/upload.php";

            xmlhttp.onreadystatechange=function() {

                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("result").innerHTML=xmlhttp.responseText;

                }
            }

            xmlhttp.open("POST", url);
            xmlhttp.setRequestHeader('Content-Type', 'image/png');
            xmlhttp.send(fd);

        }

function uploadProgress(evt) {

        if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
                document.getElementById('prog').value = percentComplete;
            }
            else {
                document.getElementById('progressNumber').innerHTML = 'unable to compute';
            }
        }
    </script>
    </head>

    <body>
        <form>
            <div class="col-md-8">
                <div id="result">Result Here</div>
                <label for="photo">Select Image</label>
                <input type="file" id="photo" name="photo" onchange="fileselected()"/>
                <input type="button" value="Upload" onclick="uploadImage()" value="Upload"/>
                <div id="filename"></div>
                <div id="filesize"></div>
                <div id="filetype"></div>

                <div id="progressNumber">
                </div>
                <progress id="prog" value="0" max="100.0"></progress>
            </div>
        </form> 

    </body>
</html>

but in upload.php has empty array of $_FILES

<?php
print_r($_FILES);
?>

How To get File for Upload? Please Help

What is your question?

C R
– C R

2015-08-27 10:36:39 +00:00
Commented Aug 27, 2015 at 10:36 — C R
– C R, Commented Aug 27, 2015 at 10:36

Community · Accepted Answer · 2017-05-23 12:03:50Z

2

Add the enctype attribute to your form tag like this:

<form enctype="multipart/form-data">

See this link for more information about the enctype.

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Aug 27, 2015 at 10:53

sanderbee

7039 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Upload Image using javascript in php

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related