Ajax для отправки формы и получения URL

Question

Я занимаюсь этим часами, и я не могу понять это, поэтому, пожалуйста, помогите.

Что я хочу сделать, это отправить форму в index.php, используя ajax для загрузки .php и получения загруженного файла.URL, чтобы я мог показать миниатюру.

Затем под миниатюрой снова должна появиться форма для загрузки другого изображения.это должно продолжаться три раза.потому что изображения ограничены тремя.миниатюры должны оставаться до конца.(см. изображение)

мой index.php

<form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

мой upload.php

<?php
$target_dir = "data/temp/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
        echo $_SERVER['SERVER_NAME']."/data/temp/". basename( $_FILES["fileToUpload"]["name"]);
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}
?>

Спасибо.

Answer 1

Вы можете сделать это с помощью Ajax .... JavaScript внутри прямой выгрузки вашего файла изображения делает это с помощью Ajax с использованием JavaScript И со стороны сервера выводит ваш URL, он отправит обратно на вашу страницу клиента, где с помощью JavaScript вы можете показатьминиатюра, если вы не поняли, и если вам нужен подробный код, спросите меня

//First add id to form like formid
//Next code
var formid = document.getElementById('formid');
   fileToUpload = new FormData(formid);
xhttp = new XMLHttpRequest ();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("img_id").innerHTML = this.responseText;//here img_id is id for img element where you want to show thumbnail
    }
  };
  xhttp.open("POST", "upload.php", true);// if you want to send by get method then write get inside of post
  xhttp.send(fileToUpload);

// Important !!!! form php page echo complete location of thumbnail