PHP uploading file when image is clicked

Question

I have this code

<?php
// Upload pictures
$folder = '../images/tmp';
foreach ($_FILES['files']['name'] as $i => $name){
    if (strlen($_FILES['files']['name'][$i]) > 1 && (false !== strpos($_FILES['files']['type'][$i],'image'))){
        if (!move_uploaded_file($_FILES['files']['tmp_name'][$i], $folder.'/'.$name)){
            // Redirect to the Upload form
            header('Location: osi_upload.php');
            exit();
        }
    }
}
?>

to upload images to localhost. After that I use this code:

<?php
    $i = -1;
  foreach(glob($folder.'/*') as $filename){
        $file[++$i] = $filename;
    } ?>

    <form action="draft.php" enctype="multipart/form-data" id="img-frm" method="post"><?php
    // Medium and large devices
    switch($gallery){
        case 1:
        { ?>
            <!--Canvas 1-->
            <div class="col-xs-12 no-pad-left-right hide-sm"><?php
      for($n=0;$n<=$i;$n++){ ?>
                <div class="in-block">
        <label for=<?php echo "img-input[".$n."]"; ?>>
          <img id=<?php echo "img-pict[".$n."]"; ?> src=<?php echo "".$file[$n].""; ?> class="canvas-1">
          <div class="alert-success pad-top-bottom text-center" id=<?php echo "img-name[".$n."]" ?>><strong><?php echo basename($file[$n]); ?></strong></div>
        </label>
        <input type="file" id=<?php echo "img-input[".$n."]"; ?>>
        </div>
        <?php
            } ?>
            </div><?php
            break;
        }
...

to view the images that I have uploaded. If necessary, I can click on one of these images to open the file download dialog box to change the corresponding image. To change the image, I use the following javascript code:

$(document).ready(function(){
    // Change clicked pictures
    if(!$('#img-frm input[type="file"]')){
        return;
    }
    $('#img-frm input[type="file"]').change(function(){
        // Get the input number
        var str = this.id.split("[");
        var i = str[1].substr(0,str[1].length-1);
        var s = 'img-pict[' + i + ']';
        // Get the new picture address
        var new_img = window.URL.createObjectURL(this.files[0]);
        // Preview the new picture
        document.getElementById(s).src = new_img;
        str = $(this).val().split("\\");
        var n = str.length;
        s = 'img-name[' + i + ']';
        document.getElementById(s).innerHTML = str[n-1];
    });
});

All of these codes work great. My problem is loading the replacement image after I clicked on the preview image to change it. I can’t understand how, in PHP I prefer, I can change the image on the server. I tried to submit the form after the change, but I received nothing in the receiving file! Blank! Can someone help.

, , , , . , . , , .

OK! , !!! , javascript $_FILES , HTML:

<label for=<?php echo "img-input[".$n."]"; ?>>
          <img id=<?php echo "img-pict[".$n."]"; ?> src=<?php echo "".$file[$n].""; ?> class="canvas-1">
          <div class="alert-success pad-top-bottom text-center" id=<?php echo "img-name[".$n."]" ?>><strong><?php echo basename($file[$n]); ?></strong></div>
        </label>
        <input type="file" id=<?php echo "img-input[".$n."]"; ?> name=<?php echo "img-input[".$n."]"; ?>>
        <input type="hidden" value=<?php echo "".$file[$n].""; ?> name=<?php echo "img-hidden[".$n."]"; ?> id=<?php echo "img-hidden[".$n."]"; ?>>

URL- . javascript :

$('#img-frm input[type="file"]').change(function(){
// Get the input number
var str = this.id.split("[");
var i = str[1].substr(0,str[1].length-1);
var s = 'img-pict[' + i + ']';
// Get the new picture address
var new_img = window.URL.createObjectURL(this.files[0]);
// Preview the new picture
document.getElementById(s).src = new_img;
s = 'img-hidden[' + i + ']';
document.getElementById(s).value = new_img;
str = $(this).val().split("\\");
var n = str.length;
s = 'img-name[' + i + ']';
document.getElementById(s).innerHTML = str[n-1];
});

:

Array ( [img-hidden] => Array ( [0] => blob:http://localhost/f8e7a5af-76fa-4da1-b489-387b55395873 [1] => ../images/tmp/templatemo_portfolio02.jpg [2] => ../images/tmp/templatemo_portfolio03.jpg [3] => ../images/tmp/templatemo_portfolio04.jpg [4] => ../images/tmp/templatemo_portfolio05.jpg [5] => ../images/tmp/templatemo_portfolio06.jpg [6] => ../images/tmp/templatemo_portfolio07.jpg [7] => ../images/tmp/templatemo_portfolio08.jpg )

, [img-hidden] blob, URL- (, , ). URL-? ? ( , , . blobs)

Answer 1

: D , , , . , - . print_r($_FILE); print_r($_FILES);, .

, ( ). , .

, ( !) API AJAX , , , .

, HTML , , .

<label for=<?php echo "img-input[".$n."]"; ?>>
          <img id=<?php echo "img-pict[".$n."]"; ?> src=<?php echo "".$file[$n].""; ?> class="canvas-1">
        </label>
        <input type="file" id=<?php echo "img-input[".$n."]"; ?> name=<?php echo "img-input[".$n."]"; ?>>

label for= - .

, , , javascript JQuery ( , )

$(document).ready(function(){
    // Change clicked pictures
    if(!$('#img-frm input[type="file"]')){
        return;
    }
    $('#img-frm input[type="file"]').change(function(){
        // Get the input number
        var str = this.id.split("[");
        var i = str[1].substr(0,str[1].length-1);
        var s = 'img-pict[' + i + ']';
        // Get the new picture address
        var new_img = window.URL.createObjectURL(this.files[0]);

        // Preview the new picture
        document.getElementById(s).src = new_img;
        str = $(this).val().split("\\");
        var n = str.length;
        s = 'img-name[' + i + ']';
        document.getElementById(s).innerHTML = str[n-1];
    });
});

var new_img = window.URL.createObjectURL(this.files[0]); URL- , , document.getElementById(s).src = new_img; , . $_FILES. PHP .

, , . .