CODEWITHSUNDEEP
javascriptphphtml
Aasim
Aasim

Reputation: 143

Uploading image file on the same page

I am trying to upload a image file on the same page using PHP and javascript.I have embedded javascript code inside PHP to show some messages and image inside html tags. Below is my code, please point me out what have done wrong and get it corrected. Any help would be appreciated. Thanks..

ImageUpload.php 

if( isset($_POST['submit']) ) { 

$fileName = $_FILES['file']['name'];  
$fileTmpName = $_FILES['file']['tmp_name'];
$fileSize = $_FILES['file']['size'];
$fileError = $_FILES['file']['error'];

$maxFileSize = 200000;

$fileExt = explode(".", $fileName);
$currFileExt = strtolower(end($fileExt));

$allowed = array('jpg', 'jpeg', 'png', 'gif');

if(in_array($currFileExt, $allowed) ){

    if($fileSize < $maxFileSize) {
        if($fileError == 0){

            $uniqueFileName = uniqid('',true).".".$currFileExt;

            move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$uniqueFileName);

            ?>
                <script type="text/javascript">
                    document.getElementById('image').setAttribute("src",<?= 'uploads/'.$uniqueFileName; ?>);
                </script>
            <?php

        } else {
            ?>
            <script type="text/javascript">
                document.getElementById('imageHolder').innerHTML = "There is an error in uploading file";
            </script>
            <?php
        }

    } else {

        ?>
            <script type="text/javascript">
                document.getElementById('imageHolder').innerHTML = "fileSize should be atmost 500kb";
            </script>
        <?php
    }


} else {
    ?>
        <script type="text/javascript">
            document.getElementById('imageHolder').innerHTML = "This type of file is not allowed";
        </script>
    <?php
}

}   
 ?>

<!DOCTYPE>
<html lang="en">

<body>

    <form action="<?= htmlspecialchars($_SERVER['PHP_SELF']); ?>" 
     method="post"   enctype="multipart/form-data" id="form" >
      <input type="file" name="file" id="file" />
      <input type="submit" value="Upload Image" name="submit" id="submit" />
    </form>

    <p ><h2>Upload image here</h2></p>

    <div id="imageHolder" style="height:200px;max-height:200px;max-
    width:200px;width:200px;border:1px solid black;">
      <img src="" id="image" style="height: 200px;width: 200px;"/>

    </div>

</body>
</html>

Upvotes: 0

Views: 1454

Answers (4)

akshay saxena
akshay saxena

Reputation: 455

Hello I have changed your code a little bit. I put your HTML part before the script

<!DOCTYPE>
<html lang="en">

<body>

    <form action="<?= htmlspecialchars($_SERVER['PHP_SELF']); ?>" 
     method="post"   enctype="multipart/form-data" id="form" >
      <input type="file" name="file" id="file" />
      <input type="submit" value="Upload Image" name="submit" id="submit" />
    </form>

    <p ><h2>Upload image here</h2></p>

    <div id="imageHolder" style="height:200px;max-height:200px;max-
    width:200px;width:200px;border:1px solid black;">
      <img src="" id="image" style="height: 200px;width: 200px;"/>

    </div>

</body>
</html>

<?php
if(isset($_POST['submit']) ) { 
$fileName = $_FILES['file']['name'];  
$fileTmpName = $_FILES['file']['tmp_name'];
$fileSize = $_FILES['file']['size'];
$fileError = $_FILES['file']['error'];

$maxFileSize = 200000;

$fileExt = explode(".", $fileName);
$currFileExt = strtolower(end($fileExt));

$allowed = array('jpg', 'jpeg', 'png', 'gif');

if(in_array($currFileExt, $allowed) ){

    if($fileSize < $maxFileSize) {
        if($fileError == 0){

            $uniqueFileName = uniqid('',true).".".$currFileExt;

            move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$uniqueFileName);

            ?>
                <script type="text/javascript">
                    document.getElementById('image').setAttribute("src","<?php echo 'uploads/'.$uniqueFileName;  ?>");
                </script>
            <?php

        } else {
            ?>
            <script type="text/javascript">
                document.getElementById('imageHolder').innerHTML = "There is an error in uploading file";
            </script>
            <?php
        }

    } else {

        ?>
            <script type="text/javascript">
                document.getElementById('imageHolder').innerHTML = "fileSize should be atmost 500kb";
            </script>
        <?php
    }


} else {
    ?>
        <script type="text/javascript">
            document.getElementById('imageHolder').innerHTML = "This type of file is not allowed";
        </script>
    <?php
}

}   
 ?>

and I changed your code this

<script type="text/javascript">
                    document.getElementById('image').setAttribute("src",<?= 'uploads/'.$uniqueFileName; ?>);
                </script>

to this 

<script type="text/javascript">
                    document.getElementById('image').setAttribute("src","<?php echo 'uploads/'.$uniqueFileName;  ?>");
                </script>

Now, I am not getting any error in console as you mentioned. Please try the code

Upvotes: 0

aidinMC
aidinMC

Reputation: 1426

To resolve your problem see @u_mulder answer but using javascript in this state is't good way, i recommend you change your code like this

<?php
$error = ''; // add $error to hold error text
$image_url = ''; // add $image_url to hold image url
if( isset($_POST['submit']) ) { 
    $fileName = $_FILES['file']['name'];  
    $fileTmpName = $_FILES['file']['tmp_name'];
    $fileSize = $_FILES['file']['size'];
    $fileError = $_FILES['file']['error'];
    $maxFileSize = 200000;
    $fileExt = explode(".", $fileName);
    $currFileExt = strtolower(end($fileExt));
    $allowed = array('jpg', 'jpeg', 'png', 'gif');
    if(in_array($currFileExt, $allowed) ){
        if($fileSize < $maxFileSize) {
            if($fileError == 0){
                $uniqueFileName = uniqid('',true).".".$currFileExt;
                move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$uniqueFileName);
                //this part updated
                $image_url = 'uploads/'.$uniqueFileName;
            } else {
                // this part updated
                $error = 'There is an error in uploading file'; 
            }
        } else {    
                // this part updated
                $error = "fileSize should be atmost 500kb";
        }
    } else {
        // this part updated
        $error = "This type of file is not allowed";
    }
}
 ?>
<!DOCTYPE>
<html lang="en">
<body>
    <form action="<?= htmlspecialchars($_SERVER['PHP_SELF']); ?>" 
     method="post"   enctype="multipart/form-data" id="form" >
      <input type="file" name="file" id="file" />
      <input type="submit" value="Upload Image" name="submit" id="submit" />
    </form>

    <p ><h2>Upload image here</h2></p>

    <div id="imageHolder" style="height:200px;max-height:200px;max-
    width:200px;width:200px;border:1px solid black;">
    <?php
        //this part updated
        if($error):
            ?>
         <p><?php echo $error; ?></p>
    <?php
        endif;?>
    <?php
        if($image_url): ?>
            <img src="<?php echo $image_url; ?>" id="image" style="height: 200px;width: 200px;"/>
    <?php
        endif; ?>
    </div>
</body>
</html>

Upvotes: 1

andreas karimi
andreas karimi

Reputation: 192

<table width="80%" border="0">
<tr>
<th onmousedown="fileUpload_upd(document.getElementById('myform_upd'),'upload_upd.php?path=img/my_image.jpg','upload1'); return false;">

Send   
</th>
</tr>
</table>

and file upload_upd.php :

  $img_ath=$_GET["path"];
  $upl=move_uploaded_file($_FILES["datafile_upd"]["tmp_name"],$img_ath);

?>

and fileUpload_upd in javascript file :

  function fileUpload_upd(form, action_url, div_id) {

 var iframe = document.createElement("iframe");
iframe.setAttribute("id", "upload_iframe");
iframe.setAttribute("name", "upload_iframe");
iframe.setAttribute("width", "0");
iframe.setAttribute("height", "0");
iframe.setAttribute("border", "0");
iframe.setAttribute("style", "width: 0; height: 0; border: none;");

// Add to document...
form.parentNode.appendChild(iframe);
window.frames['upload_iframe'].name = "upload_iframe";

iframeId = document.getElementById("upload_iframe");

// Add event...
var eventHandler = function () {

        if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
        else iframeId.removeEventListener("load", eventHandler, false);

        // Message from server...
        if (iframeId.contentDocument) {
            content = iframeId.contentDocument.body.innerHTML;
        } else if (iframeId.contentWindow) {
            content = iframeId.contentWindow.document.body.innerHTML;
        } else if (iframeId.document) {
            content = iframeId.document.body.innerHTML;
        }

        document.getElementById(div_id).innerHTML = content;

        // Del the iframe...
        setTimeout('iframeId.parentNode.removeChild(iframeId)', 250);
    }

if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

// Set properties of form...
form.setAttribute("target", "upload_iframe");
form.setAttribute("action", action_url);
form.setAttribute("method", "post");
form.setAttribute("enctype", "multipart/form-data");
form.setAttribute("encoding", "multipart/form-data");

// Submit the form...
form.submit();

document.getElementById(div_id).innerHTML = "</br></br></br><img       src=src/img/loadingsmall.gif></br></br></br>";
    }

Upvotes: 0

u_mulder
u_mulder

Reputation: 54831

Your problem here is that your javascript code runs before required html element appears on the page. So, when you try to get element with

document.getElementById('imageHolder')

whereas this element not renedered, javascript founds nothing and returns null.

So, you need to output javascript codes after required elements are outputted.

You can do for example like this:

<!DOCTYPE>
<html lang="en">

<body>

    <form action="<?= htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post"   enctype="multipart/form-data" id="form">
      <input type="file" name="file" id="file" />
      <input type="submit" value="Upload Image" name="submit" id="submit" />
    </form>

    <p ><h2>Upload image here</h2></p>
    <div id="imageHolder" style="height:200px;max-height:200px;max-
    width:200px;width:200px;border:1px solid black;">
        <img src="" id="image" style="height: 200px;width: 200px;"/>
    </div>
<?php
if( isset($_POST['submit']) ) { 
    $fileName = $_FILES['file']['name'];  
    $fileTmpName = $_FILES['file']['tmp_name'];
    $fileSize = $_FILES['file']['size'];
    $fileError = $_FILES['file']['error'];

    $maxFileSize = 200000;

    $fileExt = explode(".", $fileName);
    $currFileExt = strtolower(end($fileExt));

    $allowed = array('jpg', 'jpeg', 'png', 'gif');

    if(in_array($currFileExt, $allowed) ){
        if($fileSize < $maxFileSize) {
            if($fileError == 0){
                $uniqueFileName = uniqid('',true).".".$currFileExt;
                move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$uniqueFileName);?>
                <script type="text/javascript">
                    document.getElementById('image').setAttribute("src",<?= 'uploads/'.$uniqueFileName; ?>);
                </script>
<?php
            } else {?>
                <script type="text/javascript">
                    document.getElementById('imageHolder').innerHTML = "There is an error in uploading file";
                </script>
<?php
            }
        } else {?>
                <script type="text/javascript">
                    document.getElementById('imageHolder').innerHTML = "fileSize should be atmost 500kb";
                </script>
<?php   }
    } else {?>
            <script type="text/javascript">
                document.getElementById('imageHolder').innerHTML = "This type of file is not allowed";
            </script>
    <?php
    }
}?>
</body>
</html>

In this case html elements are in DOM already and javascript can find them.

Another option can be using jquery with document.ready (or pure js-analog load function, afair), in this case you can place your js-codes where you want.

Upvotes: 0

Related Questions