DerStrom8 DerStrom8 - 2 months ago 10
PHP Question

Running PHP Script from HTML Leads to Blank PHP Page

(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>

Answer Source

How to upload a file without refreshing or redirecting.

Note: Solution is at the bottom

Although I have tried to solve this problem, I continually run into problems. I have not tried to upload a file before in AJAX (until I attempted for this question), and because of this I do not believe I have enough experience to write an answer in my own code.

However I do want to help you with your problem, so I have taken the liberty of finding any and all the resources I think you will need to solve this problem.


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


Conclusion

I do apologize for not giving you an original answer, however this problem is not the easiest to replicate, let alone fix. This would be the third edit of my answer, the first two I gave were incorrect and untested which I again apologize for.

If you are willing to upload the file with a page refresh, that would be something I have had experience with and could help you with. But AJAX is not my strongest suit so I will have to leave you in more professional hands.


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


EDIT

The thought of not solving a problem haunted me, so I tried again. This code was copied from one of the sources I have gave you but has some personal touches of mine.

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.