Question

我制作了一个照片上传系统但现在遇到了问题：

这里是Ajax部分：

$(document).ready(function(){
        $("#upload").click(function(e){
            var formData = new FormData(this);
            e.preventDefault();
            e.stopPropagation();
            $.ajax({
                type: "POST",
                url: "../system/avatar_system.php",
                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success: function(data){
                    if(data == "upload_ok"){
                        location.reload();
                    }
                },
                error: function(){
                }
            });
        });
});

这里是html：

<div class="form_box">
        <form id="avatar_form" enctype="multipart/form-data" method="post" action="../system/avatar_system.php">
            <input type="file" accept="image/*" id="file" name="file" class="select_file">
            <label for="file">Bild auswählen</label>
            <input id="upload" type="submit" value="Bild ändern" class="upload_file">
        </form> 
    </div>

这里是avatar_system.php：

if(isset($_FILES['file'])){
$dirpath = "../users/". $username ."/avataruploads/";
if(!is_dir($dirpath)){
    if(!mkdir($dirpath, 0777, true)){
        $error =  error_get_last();
        echo "Failed creating Folder";
        exit();
    }       
}

$file = $_FILES['file'];

$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileTmpName = $_FILES['file']['tmp_name'];
$fileSize = $_FILES['file']['size'];
$fileError = $_FILES['file']['error'];

$fileExplode = explode('.', $fileName);
$fileExt = strtolower(end($fileExplode));

$allowed = array('jpg', 'jpeg', 'png', 'gif');
if(in_array($fileExt, $allowed)){
    if($fileError === 0){
        if($fileSize < 32768000){
            $fileNewName = uniqid('', true) . '.' . $fileExt;
            $filepath = $dirpath . $fileNewName;
            move_uploaded_file($fileTmpName, $filepath);
            $sql = "UPDATE users SET avatar = '$filepath' WHERE username = '$username'";
            mysqli_query($conn, $sql);
            mysqli_close($conn);
            echo "upload_ok";
            exit();
        }else{
            echo "This file is to big";
            exit();
        }
    }else{
        echo "There was an Error";
        exit();
    }
}else{
    echo "Not allowed Extension";
    exit();
}
}

如果响应是“upload_ok”，我希望网站重新加载，但是我得到一个新的空白页面，其中包含“upload_ok”消息。或者它可能不应该重新加载页面，而只是立即更改头像。

这怎么可能？

Answer 1

正如您在错误文字中看到的那样

TypeError：FormData构造函数的参数1（＆＃39; form＆＃39;）必须是HTMLFormElement的实例

您传递给FormData 而非 <form>，但<input[type=submit]>。

所以，你应该传递一个<form>。最简单的方法是

var formData = new FormData(this.form);

这是可能的，因为input的{{1}}始终具有属性form，其中＆＃39; sa form，该输入属于。{/ p >

Answer 2

你应该改变

 Capybara.register_driver :selenium_chrome do |app|
   Capybara::Selenium::Driver.new(app, :browser => :chrome, args: 
     ['headless', 'disable-gpu', 'disable-web-security'])
end

到

$("#upload").click(

正如u_mulder所提到的，这是绑定按钮而不是表单。此外，最好使用提交事件而不是按钮点击，因为您还可以提交表单，但在输入字段中按Enter键。

Ajax成功函数对响应没有反应

2 个答案: