javascript - 如何使用ajax发送图像和数据

Question

我想更改个人资料信息。有4个输入框和2个输入文件类型。

如果没有 jquery，只用 javascript 能解决这个问题吗？

我无法使用 Ajax 传递输入框值和输入文件类型图像，直到现在我的代码总是返回

Notice: Undefined index: full_name in C:\xampp\htdocs\hate\php\profile-update.php on line 6

... until

Notice: Undefined index: bg_img in C:\xampp\htdocs\hate\php\profile-update.php on line 15

我认为我在 formData.append(); 中犯了错误

谁能解释一下 .files[0]。我在 Google 中找不到它。

html

<input type="text" maxlength="20" id="fullname-box" name="full_name" onkeyup="disableSubmit()">
<input type="text" maxlength="20" id="screenname-box" name="screen_name" onkeyup="disableSubmit()">
<input type="text" id="targetname-box" name="target_name">
<textarea maxlength="50" id="desc-box" name="description" ></textarea>
<input id="imgInput" type="file" class="upload" accept="image/*" name="profile_img"/>
<input id="imgInputBg" type="file" class="upload" accept="image/*" name="bg_img"/>

脚本 Ajax

function change_profile(){
            var http = new XMLHttpRequest();

            var fullname = document.getElementById("fullname-box").value;
            var screenname = document.getElementById("screenname-box").value;
            var targetname = document.getElementById("targetname-box").value;
            var desc = document.getElementById("desc-box").value;

            var profile = document.getElementById("imgInput");
            if(profile.value == ""){
                var profile_img = profile.files[0];
            }
            var bg = document.getElementById('imgInputBg');
            if(bg.value == ""){
                var bg_img = bg.files[1];
            }

            var formData = new FormData();
            formData.append("full_name", fullname);
            formData.append("screen_name", screenname);
            formData.append("target_name", targetname);
            formData.append("description", desc);
            formData.append("profile_img", profile_img);
            formData.append("bg_img", bg_img);

            var url = "profile-update.php";
            http.open("POST",url,true);
            http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            http.onreadystatechange = function(){
                if (http.readyState==4 && http.status==200){
                    document.getElementById("info").innerHTML = http.responseText;
                }
            }
            http.send(formData);
        }

profile-update.php 从第 6 行开始

$full_name = $_POST['full_name'];
$screen_name = htmlspecialchars(mysqli_real_escape_string($conn,$_POST['screen_name']));
$target_name = $_POST['target_name'];
$description = htmlspecialchars(mysqli_real_escape_string($conn,$_POST['description']));
$profile_img_name = $_FILES['profile_img']['name'];
$profile_img_size = $_FILES['profile_img']['size'];
$profile_img_tmp = $_FILES['profile_img']['tmp_name'];
$bg_img_name = $_FILES['bg_img']['name'];
$bg_img_size = $_FILES['bg_img']['size'];
$bg_img_tmp = $_FILES['bg_img']['tmp_name'];

Answer 1

试试这个:

我在这里举了一个例子。请从那里获取适当的代码并在您的脚本中使用它。

<script type="text/javascript">

    $(document).ready(function() {

        $("form#frm1").submit(function() {
            var formData = new FormData($(this)[0]);

            $.ajax({
                url: 'posturl.php',
                type: 'POST',
                data: formData,
                async: false,
                success: function(data) {
                    alert(data);
                },
                cache: false,
                contentType: false,
                processData: false
            });

            return false;
        });

    });
</script>

<form name="frm1" id="frm1" action="number.php" method="post" enctype="multipart/form-data">
    <input type="text" name="pname" id="pname" placeholder="Person Name"  />
    <br />
    <br />
    <input type="file" name="pfile" id="pfile"  />
    <br />
    <input type="submit" value="Send" name="btnadd" id="btnadd" style="margin-top: 25px" />
</form>

此外，请在此处使用您自己的表单和字段。