Display the image after uploading it from another php file through ajax and jquery

Question

When the page is loaded, the image specified in src is displayed.When a user clicks on the form to upload the image,everything works fine except the image on the page does not change. It is because when the user clicks on the form to upload the image, he is directed to php file 2 but from there there is no request to change the image in php file 1. How can I achieve this (using ajax and jquery)?

You want to display Image that User uploaded after Form Submit? — Pratik Joshi
– Pratik Joshi, Commented Jun 1, 2014 at 8:14
Yes..the image is uploaded in php file2 but I have to display image in php file1. — user3452721
– user3452721, Commented Jun 1, 2014 at 8:22
Just send the src of new image from php file 2 and then change src of image tab to this new src using jquery. $('id_of_img tag').attr('src','new_src'); — Tushar Dave
– Tushar Dave, Commented Jun 1, 2014 at 8:22
@user3452721 u have to echo that new src in php file 2 to have it in success function as parameter. — Tushar Dave
– Tushar Dave, Commented Jun 1, 2014 at 8:23

Mirza · Accepted Answer · 2014-06-01 13:48:21Z

3

Try this code. This is the core.

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
            $('#imgInp').on('change', function() {
            readPath(this);
            });
            });

            function readPath(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]);
                }
            }
        </script>
    </head>
    <body>
<form id="form1">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" width="500px" height="200px" alt="your image" />
</form>

    </body> 
</html>

edited Jun 1, 2014 at 13:48

answered Jun 1, 2014 at 12:36

Mirza

1,5511 gold badge22 silver badges31 bronze badges

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

4 Comments

user3452721 Over a year ago

Where in JS file should I write it?Secondly, the thing is that actually I want to call the div with id="image_container" again so as not to show the new src file name and path... using ajax without reloading webpage.Any ideas?

Mirza Over a year ago

In an ajax call,What you echo in the the php file is what you get returned as data there. I will show you a full example shortly.

Mirza Over a year ago

I have added a new code, and omitted ajax since jquery have some security issues giving the path of uploaded file. Try new code

Mirza Over a year ago

What conditions do you want to check. Also when do you want to check? At the time the file is uploaded or when the form is submitted?

Mirza · Accepted Answer · 2014-06-01 17:09:29Z

Here is another code snippet. Check your conditions in the server part and don't forget provide the locations correctly in server side and image src.

HTML Part

<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style>
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>Ajax File Upload Demo</h1>
 <img id="blah" src="#" width="500px" height="200px" alt="your image" />
<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
     <input type="file" size="60" name="myfile">
     <input type="submit" value="Ajax File Upload">
 </form>

 <div id="progress">
        <div id="bar"></div>
        <div id="percent">0%</div >
</div>
<br/>

<div id="message"></div>

<script>
$(document).ready(function()
{

    var options = { 
    beforeSend: function() 
    {
        $("#progress").show();
        //clear everything
        $("#bar").width('0%');
        $("#message").html("");
        $("#percent").html("0%");
    },
    uploadProgress: function(event, position, total, percentComplete) 
    {
        $("#bar").width(percentComplete+'%');
        $("#percent").html(percentComplete+'%');

    },
    success: function() 
    {
        $("#bar").width('100%');
        $("#percent").html('100%');

    },
    complete: function(response) 
    {
        $("#blah").attr("src",response.responseText);
    },
    error: function()
    {
        $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

    }

}; 

     $("#myForm").ajaxForm(options);

});

</script>
</body>

</html>

Upload.php

<?php
//upload.php
$output_dir = "C:/wamp/www/";

if(isset($_FILES["myfile"]))
{
    //Filter the file types , if you want.
    if ($_FILES["myfile"]["error"] > 0)
    {
      echo "Error: " . $_FILES["file"]["error"] . "<br>";
    }
    else
    {
        //move the uploaded file to uploads folder;
        move_uploaded_file($_FILES["myfile"]["tmp_name"],$output_dir. $_FILES["myfile"]["name"]);

     echo $_FILES["myfile"]["name"];
    }

}
?>

You can check the conditions in upload.php using $_FILES["file"]["size"] and $_FILES["file"]["type"]
I tried your code but it is not working on firefox.Though the page does not reload but the newer image also does not get displayed until I manually reload the page.

Collectives™ on Stack Overflow

Display the image after uploading it from another php file through ajax and jquery

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related