Question

I have a working Ajax form, now I’m trying to add file upload to it but it doesn’t work. The file isn’t uploaded or found in the $_FILES array. The code is pretty straight-forward so I don’t know what I could be doing wrong. I’m giving the HTML, AJAX and PHP code here, but since the HTML and PHP are so simple, I think I must be missing something in the Ajax function since I don’t have much experience with that.

Here’s the HTML:

<div id="leave_comment" class="leave_comment">
    <form name="comment" id="comment" action="#" method="post" enctype="multipart/form-data">
        <input type="hidden" name="rep_id" id="rep_id" value="something"/>
        Name: <input type="text" name="c_name" id="c_name" onFocus="this.value=''; this.onfocus=null;"
                     value="Anonymous"/>
        <br/>Comment:
        <br/><textarea name="comment_box" id="comment_box" rows="5" cols="46" maxlength="2000" style="width:390px;"
                       onFocus="this.value=''; this.onfocus=null;">Type your comment here</textarea>

        <p>Upload image (optional):
            <br/><input type="hidden" name="size" value="2000000"><input type="file" name="photo">
            <br/><input type="submit" class="submit" value="Add Comment"/>
    </form>
</div>

This is the AJAX:

<script type="text/javascript">
    $(function () {
        $(".submit").click(function () {
            var name = $("#c_name").val();
            var comment = $("#comment_box").val();
            var rep_id = $("#rep_id<").val();
            var dataString = 'name=' + name + '&comment=' + comment + '&rep_id=' + rep_id;
            if (name == '' || comment == '' || comment == 'Type your comment here') {
                alert('Please Leave a Comment');
            }
            else {
                $("#flash").show();
                $("#flash").fadeIn(400).html('<img src="../../images/loading_indicator.gif" />Loading Comment...');
                $.ajax({
                    type:"POST",
                    url:"../../commentajax.php",
                    data:dataString,
                    cache:false,
                    success:function (html) {
                        $("ol#update").append(html);
                        $("ol#update li:last").fadeIn("slow");
                        $("#flash").hide();
                        $("#leave_comment").hide();
                    }
                });
            }
            return false;
        });
    });
</script>

And the PHP in commentajax.php:

if ($_POST) {
    $name    = mysql_real_escape_string($_POST['name']);
    $comment = mysql_real_escape_string($_POST['comment']);
    $rep_id  = $_POST['rep_id'];
    $now     = date('Y-m-d h:i:s');
    $ip      = $_SERVER['REMOTE_ADDR'];

    //handle photo upload
    $target      = "userphotos/";
    $rand_string = substr(str_shuffle(str_repeat('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', 6)), 0, 6);
    $target      = $target . $rand_string . "_" . basename($_FILES['photo']['name']);
    $pic         = $rand_string . "_" . $_FILES['photo']['name'];
    move_uploaded_file($_FILES['photo']['tmp_name'], $target);
    if ($target == "userphotos/") {
        $target = "";
    }
    if (pathinfo($pic, PATHINFO_EXTENSION) !== 'jpg' && pathinfo($pic, PATHINFO_EXTENSION) !== 'jpeg' && pathinfo($pic, PATHINFO_EXTENSION) !== 'gif' && pathinfo($pic, PATHINFO_EXTENSION) !== 'bmp' && pathinfo($pic, PATHINFO_EXTENSION) !== 'png' && pathinfo($pic, PATHINFO_EXTENSION) !== 'JPG' && pathinfo($pic, PATHINFO_EXTENSION) !== 'JPEG' && pathinfo($pic, PATHINFO_EXTENSION) !== 'GIF' && pathinfo($pic, PATHINFO_EXTENSION) !== 'BMP' && pathinfo($pic, PATHINFO_EXTENSION) !== 'PNG' && $pic !== "") {
        $pic = "";
    }

    $resb = mysql_query("select * from blocked_ips where ip='$ip' ") or die(mysql_error());
    $numb = mysql_num_rows($resb);
    if ($numb == 0) {
        mysql_query("insert into comments (report_id, author, ip, comment, photo) values ('$rep_id', '$name', '$ip', '$comment', '$pic') ") or die(mysql_error());
        echo "<h5>Reply by " . $name . " on " . $now . "</h5><div id='comment'>" . nl2br($comment) . "</div>";
    }
    else {
        echo "<p class='error'>The IP you are using is banned.";
    }
}

Answer 1

You either need to pass the file datas as raw datas( javascript file API ) , use flash or use an iframe , because of how browsers work , you cant just post the file input through ajax.

http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml