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

How to send image and data using ajax

提问by aLIEz

I want to change profile information. There are 4 input box and 2 input file type.

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

could this problem solved with only javascript without jquery?

这个问题可以用没有jquery的javascript解决吗？

i can't passing input box value and input file type image using Ajax, until now my code always return

我无法使用 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

I think my mistake in formData.append();

我认为我的错误 formData.append();

And could someone explain about .files[0]. I can't find it in Google.

有人可以解释一下 .files[0]。我在谷歌上找不到。

html

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"/>

script ajax

脚本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 start from line 6

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'];

回答by Anand Solanki

Try this:

试试这个：

I have given one example here. Please take proper code from there and use it in your script.

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

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

Also, use your own forms and fields here.

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

回答by Ferrakkem Bhuiyan

$("#yourId").click(function(){
    $.ajax({
        url: "provideyourUrl.php",// give your url
        type: "POST",
        data: formdata,
        processData: false,
        contentType: false,
        success: function (response) {
            console.log(response);
        }
    });
});