照片上传无法通过 Ajax 调用

Question

我正在尝试使用 Ajax 上传照片，以便在单击提交按钮后发布照片。

流程： 用户上传图片 -> Ajax 调用上传照片， 用户点击提交 -> 帖子连同照片一起显示给用户

这是我上传图片的php文件：

            <div class="box-footer">
                <div id='preview' style="max-width:50px;max-height:60px;padding:5px;></div>
                <div id="button_bar">
                    <!-- <div id="icons">
                    <div class="filebutton" title="Image Upload"> -->
                    <form id="imageform" method="post" enctype="multipart/form-data" action='WallPost1/ajax_image.php'>
                        <span><input type="file" name="photoimg" id="photoimg" onchange= PhotoUpload()></span>
                    </form>
                </div>
                <button type="submit" class="btn btn-primary"  id="tweet_submit" onclick=TweetSubmit()>Submit</button>
                </div>
            </div>

这是我的 JS 代码：

            function PhotoUpload(){
                    alert ('got photo');         
                    $("#preview").html('');
                    $("#preview").html('<small>Loading...</small>');
                    $("#imageform").ajaxForm({
                        target: '#preview'
                    }).submit();
            }

这是我的 ajax_image.php 代码

            <?php
            include('includes/dbconnection.php');
            include("session.php");
            $path = "uploads/";
            $valid_formats = array("jpg", "png", "gif","JPG","JPEG","jpeg","PNG");
            if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
            {
                $name = $_FILES['photoimg']['name'];
                $size = $_FILES['photoimg']['size'];
                if(strlen($name))
                {
                    list($txt, $ext) = explode(".", $name);
                    if(in_array($ext,$valid_formats))
                    {
                        if($size<(1024*1024))
                        {
                            $actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;

                            $tmp = $_FILES['photoimg']['tmp_name'];
                            if(move_uploaded_file($tmp, $path.$actual_image_name))
                            {
                                $command="Insert into uploads(image_name) values('$actual_image_name')";
                                if (!mysqli_query($con,$command))
                                {
                                    die('Error: ' . mysqli_error($con));
                                }
                                else
                                {
                                    $msg ="<br> 1 record added";
                                }
                                //echo "-----Images here----".$msg;
                                $query=mysqli_query($con,"Select upload_id,image_name from uploads where image_name='$actual_image_name'"); 
                                $result=mysqli_fetch_array($query);
                                $id=$result['upload_id'];

                                echo "<img src='BootStrapProject/WallPost1/uploads/".$actual_image_name."' class='preview' id='$id'>";          
                            }
                            else
                            echo "failed";
                        }
                        else
                            echo "Image file size max 250k";                    
                    }
                    else
                        echo "Invalid file format..";    
                }

                else
                    echo "Please select image..!";
                exit;
            }
            ?>

每当我使用输入表单选择文件时，都会调用 JS，我会在 UI 上看到“正在加载...”消息，但之后没有任何反应。

谁能帮我理解为什么我的 ajax_image.php 文件没有被调用。

提前致谢！

Answer 1

我很乐意解决这个问题，我相信问题是 JQuery 库不知何故被不支持 ajaxForm 的旧版本覆盖。

感谢您提供的所有宝贵意见。