简单的AJAX文件上传表单不起作用

Question

我有一个工作阿贾克斯的形式，现在我想上传文件添加到它，但它不工作。 该文件未上载或在$_FILES数组中找到。 代码非常简单明了，所以我不知道自己可能做错了什么。 我在这里提供HTML，AJAX和PHP代码，但是由于HTML和PHP非常简单，我想我肯定在Ajax函数中缺少一些东西，因为我对此没有太多经验。

这是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>

这是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>

以及commentajax.php中的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

由于浏览器的工作方式，您要么需要将文件数据作为原始数据（javascript文件API）传递，要么使用Flash或使用iframe，就不能仅仅通过ajax发布文件输入。

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