AjaxChat: Image Upload code hangs, freezes browser, crashes server

问题

This is a tangent from the question here:

Returning value to Javascript from PHP called from XMLHttpRequest

I am adding an "image upload" button to my AjaxChat. I am using an XMLHttpRequest to send the image to the server, where I run a PHP script to move it to my images folder. Below is the Javascript function in charge of opening the XMLHttpRequest connection and sending the file:

function uploadImage() {
        var form = document.getElementById('fileSelectForm');
        var photo = document.getElementById('photo');
        var uploadButton = document.getElementById('imageUploadButton');
        form.onsubmit = function(event) {
            event.preventDefault();

            // Update button text
            uploadButton.innerHTML = 'Uploading...';

            //Get selected files from input
            var files = photo.files;

            // Create a new FormData object
            var formData = new FormData();

            // Loop through selected files
            for (var i = 0; files.length > i; i++) {
                var file = files[i];

                // Check file type; only images are allowed
                if (!file.type.match('image/*')) {
                    continue;
                }
                // Add file to request
                formData.append('photo', file, file.name);
            }

            // Set up request
            var xhr = new XMLHttpRequest();

            // Open connection
            xhr.open('POST', 'sites/all/modules/ajaxchat/upload.php', true);

            // Set up handler for when request finishes
            xhr.onload = function () {
                if (xhr.status === 200) {
                    //File(s) uploaded
                    uploadButton.innerHTML = 'Upload';
                    var result = xhr.responseText;
                    ajaxChat.insertText('\n\[img\]http:\/\/www.mysite.com\/images' + result + '\[\/img\]');
                    ajaxChat.sendMessage();
                } else {
                    alert('An error occurred!');
                }
                form.reset();
            };

            // Send data
            xhr.send(formData);
        }
    }

Here is upload.php:

<?php
$valid_file = true;
if($_FILES['photo']['name']) {
    //if no errors...
    if(!$_FILES['photo']['error']) {
        //now is the time to modify the future file name and validate the file
        $new_file_name = strtolower($_FILES['photo']['tmp_name']); //rename file
        if($_FILES['photo']['size'] > (1024000)) { //can't be larger than 1 MB
            $valid_file = false;
        }

        //if the file has passed the test
        if($valid_file) {
            //move it to where we want it to be
            move_uploaded_file($_FILES['photo']['tmp_name'], '/var/www/html/images'.$new_file_name);
            $message = $new_file_name;
            exit("$message");
        }
    }
}
?>

I currently have the multiple image upload disabled, so the "Loop through selected files" only executes once.

The upload worked for a little bit on my PC, but then I tried uploading an image from my phone. When I did so, the entire server (and my browser) crashed, presumably due to an infinite loop somewhere. Every time I close my browser and log back in, or restart the server, or restart my computer, it hangs and eventually crashes again (on my PC or on my phone). I have been unable to find the script that is causing the issue. I get the feeling it's right under my nose. Does anyone see the problem? If you need the HTML form code then I can provide that, but I don't think it's necessary.

来源：https://stackoverflow.com/questions/38918424/ajaxchat-image-upload-code-hangs-freezes-browser-crashes-server

标签

javascript

php

xmlhttprequest

infinite-loop