Running PHP Script from HTML Leads to Blank PHP Page

Question

(Note: Updated title to better match the question)

I am working on adding an image upload feature to ajax chat, and I have the HTML and PHP already written (basically copied from W3Schools) to do this. I have a test HTML page set up on the server to test the image uploads and that works just fine - the form works and the file is uploaded when the "Upload Image" button is pressed (to execute the PHP upload code). However, once the upload is complete the page switches to a blank page with the URL for my upload.php file.

I am currently using a modal in HTML to initially hide the image upload form and only appear when the "Image" button in the chat is pressed. The code is very simple, and as I said is basically the same as seen in the above link but placed inside a modal.

And before anyone complains, I know PHP is easy to exploit and can be dangerous when put on a website but this has been determined to be a non-issue in my case.

Below is the code for the image upload modal. Please pardon all the in-line CSS, I will eventually move it to its own stylesheet but have been using in-line for development purposes. Note that display is set to block for debugging. For the live site it would be set to none and a javascript function is used to set it to block when the "Image" button is pressed in the chat module.

<html>
    <body>
        <div id="imageUploadModal" style="display:block; position:fixed; z-index:1; left:0; top:0; width:100%; height:100%;.
             overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4);">
            <div style="background-color:#fefefe; margin:15% auto; padding:20px; border:1px solid #888; width:80%;">
                <span style="color:#aaa; float:right; font-size:28px; font-weight:bold;">&times;</span>
                <form action="upload.php" method="post" enctype="multipart/form-data">
                    Select image:
                    <input type="file" name="fileToUpload" id="fileToUpload"/>
                    <input type="submit" value="Upload Image" name="submit"/>
                </form>
            </div>
        </div>
    </body>
</html>

UPDATE: Below are the contents of upload.php:

<?php
// Error reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is an actual image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        //The file is an image
        $uploadOk = 1;
    } else {
        //The file is not an image
        $uploadOk = 0;
    }
}

// Check if file already exists
if (file_exists($target_file)) {
    //The file already exists
    $uploadOk = 0;
}

// Check file size
if (2000000 < $_FILES["fileToUpload"]["size"]) {
    //The file is too large
    $uploadOk = 0;
}

// Allow certain file formats
if (($imageFileType != "jpg") && ($imageFileType != "png")
    && ($imageFileType != "jpeg") && ($imageFileType != "gif")) {
    //Only JPG, JPEG, PNG, and GIF files are allowed
    $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    //The file was not uploaded
    exit();
// if everything is ok, try to upload the file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        exit();
    } else {
        //There was an error uploading the file
        exit();
    }
}
?>

EDIT: Updated HTML/Javascript

// Ajax image upload
$(document).ready(function() {
    $("#uploadForm").submit(function(event) {
        event.preventDefault();

        var $form = $("#uploadForm");
        var serializedData = $form.serialize();

        var request = $.ajax({
            type: "POST",
            url: "/upload.php",
            data: serializedData
        });

        request.done(function() {
            console.log("AJAX Success!");
            closeImageUploadModal();
        });
    })
});

HTML:

<div id="imageUploadModal" style="display:none; position:fixed; z-index:1; left:0; top:0; width:100%; height:100%; 
    overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4);">
    <div style="background-color:#0e0e0e; color:#aaa;  margin:15% auto; padding:20px; border:1px solid #888; width:50%;">
        <span id="close" style="color:#aaa; float:right; font-size:28px; font-weight:bold;" onclick="closeImageUploadModal()">&times;</span>
        <form id="uploadForm">
            <h3><b>Select image:</b></h3>
            <input type="file" name="fileToUpload" id="fileToUpload" accept=".jpg, .JPG, .png, .PNG, .jpeg, .JPEG, .gif, .GIF"/>
            <input type="submit" value="Upload Image" name="submit"/>
        </form>
    </div>
</div>

Please show us the code for the chat application, especially the submit file event handler — frozen
– frozen, Commented Jul 8, 2017 at 18:27
I added the modal code. I can't show any more, unfortunately, due to some privacy issues — DerStrom8
– DerStrom8, Commented Jul 8, 2017 at 18:32
I added an update that may be useful in diagnosing the issue. — DerStrom8
– DerStrom8, Commented Jul 8, 2017 at 20:05
No ideas, even after the edits? Basically I want the PHP code located in upload.php to run without exiting the original page from which the PHP was called. I'm also adding the contents of upload.php to the question. — DerStrom8
– DerStrom8, Commented Jul 9, 2017 at 21:07
@randnum-1 Ignore the part about ajax chat (I'm about to remove it from the question). I figured out why the chat was closing and it was due to some custom code. I disabled the custom code and it no longer closes the chat, but it still brings up a blank page. — DerStrom8
– DerStrom8, Commented Jul 10, 2017 at 21:43

Lars Peterson · Accepted Answer · 2017-09-05 09:08:01Z

1

+50

How to upload a file without refreshing or redirecting.

Method 1: Plugins

Plugins would probably be the best for you, since they are usually well tested and relatively bug free and require hardly any work to get it running. There are a number of plugins you can use, I have them listed below.

jQuery File Uploader

Multiple File Upload Plugin

Mini Multiple File Upload

jQuery File Upload

Method 2: Other StackOverflow Answers

There has been plenty of answers for this type of problem. I have listed some below.

How can I upload files asynchronously?

jQuery AJAX file upload PHP

How to use $.ajax() for input field text AND FILE upload?

jQuery Ajax File Upload

File Upload Ajax PHP

Additional Sources to look at

https://www.sanwebe.com/2012/06/ajax-file-upload-with-php-and-jquery

https://www.formget.com/ajax-image-upload-php/

If you need more sources to look at try searching:

How to upload file with AJAX and PHP

Uploading File with AJAX and PHP

Sending File to AJAX and PHP upload

File Upload AJAX and PHP

Solution

HTML

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" onclick="UploadFile()" />
</form>

<progress></progress>

JavaScript and AJAX

Note: You will need jQuery for this section. Please link the lastest CDN to your document.

function UploadFile()
{
    $.ajax({
        url: 'upload.php',
        type: 'POST',

        data: new FormData($('form')[0]),

        cache: false,
        contentType: false,
        processData: false,

        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();

            if (myXhr.upload)
            {
                myXhr.upload.addEventListener('progress', function(e)
                {
                    if (e.lengthComputable)
                    {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                }, false);
            }

            return myXhr;
        },

        success: function() {
                     // close modal here
                 }
    });
}

This does work since I have tested it. You will need to change your PHP a little.

edited Sep 5, 2017 at 9:08

answered Jul 12, 2017 at 12:18

Lars Peterson

1,5321 gold badge12 silver badges27 bronze badges

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

31 Comments

DerStrom8 Over a year ago

The question may seem "misleading" because it evolved significantly over the course of testing and troubleshooting. It started off seeming like it was one problem but ended up being another. And by the way, I spent days googling the suggested phrases and didn't find what I was looking for

Lars Peterson Over a year ago

Did my answer help? And I didn't mean to come off as being rude, just trying to help.

DerStrom8 Over a year ago

I appreciate the answer (it's the first I got). I just implemented the code but it takes me to the front page of my website with the following appended to the URL: /?fileToUpload=<myfilename>.png&submit="Upload+Image" and the file wasn't uploaded. Also, do you have an extra semicolon? Are you sure there should there be a semicolon on the line second up from the bottom?

Lars Peterson Over a year ago

Yes, there should be a semicolon there. The page should not have reloaded , refreshed, or redirected you. Are you sure you removed the old code and replaced it with my answer. The POST variables sent over the URL will be accessed in your upload.php file, using $_POST['example'];

Lars Peterson Over a year ago

THANK GOD! I was completely running out of ideas. I'm glad I could help. I have edited my answer to include where I think the code to close your modal should go.

|

Minh Mai Van · Accepted Answer · 2017-07-13 09:02:22Z

-1

Just merge your PHP code and HTML to a file and then, in the form, submit to it self.

    <?php
    $Fname = $_POST["Fname"];
    $Lname = $_POST["Lname"];
    ?>
    <html>
    <head>
    <title>Personal INFO</title>
    </head>
    <body>
    <form method="post" action="<?php echo $PHP_SELF;?>">
    First Name:<input type="text" size="12" maxlength="12" name="Fname"><br />
    Last Name:<input type="text" size="12" maxlength="36" name="Lname"><br />
    </form>
    <?
    echo "Hello, ".$Fname." ".$Lname.".<br />";
    ?>

answered Jul 13, 2017 at 9:02

Minh Mai Van

13 bronze badges

1 Comment

DerStrom8 Over a year ago

I need to keep the PHP in an external file for this particular application.

Collectives™ on Stack Overflow

Running PHP Script from HTML Leads to Blank PHP Page

2 Answers 2

How to upload a file without refreshing or redirecting.

Method 1: Plugins

Method 2: Other StackOverflow Answers

Additional Sources to look at

Solution

31 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

How to upload a file without refreshing or redirecting.

Method 1: Plugins

Method 2: Other StackOverflow Answers

Additional Sources to look at

Solution

31 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related