如何防止上传脚本在页面重新加载时再次移动文件？

Question

The Form:

<div id="maindiv">

            <div id="formdiv">
                <h2>Multiple Image Upload Form</h2>
                <form enctype="multipart/form-data" action="" method="post">
                    First Field is Compulsory. Only JPEG,PNG,JPG Type Image Uploaded. Image Size Should Be Less Than 100KB.
                    <hr/>
                    <div id="filediv"><input name="file[]" type="file" id="file"/></div><br/>

                    <input type="button" id="add_more" class="upload" value="Add More Files"/>
                    <input type="submit" value="Upload File" name="submit" id="upload" class="upload"/>
                </form>
                <br/>
                <br/>
                <!-------Including PHP Script here------>
                <?php include "upload.php"; ?>
            </div>

        </div>

The Script:

<?php
if (isset($_POST['submit'])) {
    $j = 0; //Variable for indexing uploaded image

    $target_path = "uploads/"; //Declaring Path for uploaded images
    for ($i = 0; $i < count($_FILES['file']['name']); $i++) {//loop to get individual element from the array

        $validextensions = array("jpeg", "jpg", "png");  //Extensions which are allowed
        $ext = explode('.', basename($_FILES['file']['name'][$i]));//explode file name from dot(.)
        $file_extension = end($ext); //store extensions in the variable

        $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext) - 1];//set the target path with a new name of image
        $j = $j + 1;//increment the number of uploaded images according to the files in array

      if (($_FILES["file"]["size"][$i] < 100000) //Approx. 100kb files can be uploaded.
                && in_array($file_extension, $validextensions)) {
            if (move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {//if file moved to uploads folder
                echo $j. ').<span id="noerror">Image uploaded successfully!.</span><br/><br/>';
            } else {//if file was not moved.
                echo $j. ').<span id="error">please try again!.</span><br/><br/>';
            }
        } else {//if file size and file type was incorrect.
            echo $j. ').<span id="error">***Invalid file Size or Type***</span><br/><br/>';
        }
    }
}
?>

This script also uses javascript for multiple image upload.

When clicking on "page reload" in the web browser, after the first upload has been done, then the script assigns the same file a new ID code for the name and moves the image files a second time into the "uploads" folder.

How to prevent the script from moving the image files (with a new ID code assigned for the name) a second time into the "uploads" folder?

Any suggestions are much appreciated.

EDIT:

So, I opted for a "redirect" to the same page, where the form gets cleared out , after the submission has been done.

It looks like, this is the way to do it.

Answer 1

Before upload (where you displays the upload FORM) you can create a key (random) and store it on your server somehere. (temp folder) (using a serial number is even more safe) You can include this as "hidden" value in the upload form. The script, which is processing the upload, should look first for this key, if it exists, you can delete it and proceed with the rename / upload / whatever you want to do. If the key is gone, you can be sure it's a duplicated request and simply ignore it.

Don't forget to clean your temp folder every time (let's say delete every keys which is older than an hour or so)