How to Preview multiple images before uploading to server?

Question

I have a program to upload multiple images to server. I am trying to preview the selected images before upload So that I could delete the unwanted image if necessary. I am stuck with the previewing part. Please help.

html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Upload Image</title>

</head>

<body>

<form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="files[]" id="fileToUpload" onChange="readURL(this)" multiple
    accept="image/*" />

    <input type="submit" value="Upload Image" name="submit">
    <img id="preview2" src="#" alt="your image" width="100" height="100" />
   <img id="preview" src="#" alt="your image" width="100" height="100" />
</form>
<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            document.getElementById('preview').src=e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
    }
}

</script>

</body>
</html>

php

<?php
$valid_formats = array("jpg", "png", "gif");
$max_file_size = 1024*720; //100 kb
$path = "gallery/"; // Upload directory
$count = 0;

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
    // Loop $_FILES to exeicute all files
    foreach ($_FILES['files']['name'] as $f => $name) {     
        if ($_FILES['files']['error'][$f] == 4) {
            continue; // Skip file if any error found
        }          

            else{ // No error found! Move uploaded files 
                if(move_uploaded_file($_FILES["files"]["tmp_name"][$f], $path.$name))
                $count++; // Number of successfully uploaded file
            }
        }
    }
?>

possible duplicate of [Preview an image before it is uploaded](http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) — maxdaniel98, Sep 29 '15 at 06:33
you can see this link to show preview of uploading multiple image using java script http://stackoverflow.com/questions/13683579/how-to-provide-a-preview-for-multiple-images-selected-in-fileuplaod-using-jquery — Ajeet Kumar, Sep 29 '15 at 06:34
@maxdaniel98 I need to preview multiple images. Not just an image. I am able to preview one image. But cant deal with the multiple image case. — Arjun, Sep 29 '15 at 07:21
@Arjun I have added Answer according to your code below Check it ! — Ajeet Kumar, Sep 29 '15 at 12:06

score 0 · Answer 1 · answered Sep 29 '15 at 06:35

Try some thing similer to this

JS

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#test').attr('src', e.target.result);
                //$("#test").css("display", "block");
                $('#test').css({"display":"block","float":"right" });

            }
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

Html

<div style="width:350px;">
    <form id="form1" enctype="multipart/form-data">
        <input onchange="readURL(this);" type="file" />
        <img alt="Image Display Here" id="test" src="#" height="100px" width="100px" />
    </form>
</div>

Css

<style>
    #test { display:none; }
</style>

Note: TESTED

Js Fiddle Preview

Actually I need to upload multiple images and preview it and need an option to clear if not needed. — Arjun, Sep 29 '15 at 06:42

score 0 · Answer 2 · answered Sep 29 '15 at 06:37

Assuming you do have html input array , so why are you working over id .. even you are passing the reference of element

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $(input).attr(src,e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

score 0 · Answer 3 · answered Sep 29 '15 at 12:04

Use this code Its working for multiple upload, Download jquery-1.10.2.min.js and replace this path(xxxxx Your path to access JQUERY xxxxxxxxxxx/) to your actual path. (Its working)

 <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Upload Image</title>

    </head>

    <body>

    <form action="upload.php" method="post" enctype="multipart/form-data">
        Select image to upload:
        <input type="file" name="files[]" id="fileToUpload" onChange="readURL(this)" multiple
        accept="image/*" />

        <input type="submit" value="Upload Image" name="submit">
        <div class="preview-area"></div>
    </form>
    <script type="text/javascript" src="xxxxx Your path to access JQUERY xxxxxxxxxxx/jquery-1.10.2.min.js"></script>
    <script>
    var inputLocalFont = document.getElementById("fileToUpload");
    inputLocalFont.addEventListener("change",previewImages,false); //bind the function to the input

    function previewImages(){
        var fileList = this.files;

        var anyWindow = window.URL || window.webkitURL;

            for(var i = 0; i < fileList.length; i++){
              //get a blob to play with
              var objectUrl = anyWindow.createObjectURL(fileList[i]);
              // for the next line to work, you need something class="preview-area" in your html
              $('.preview-area').append('<img src="' + objectUrl + '" width="100" height="100"/>');
              // get rid of the blob
              window.URL.revokeObjectURL(fileList[i]);
            }


    }

    </script>

    </body>
    </html>

How to Preview multiple images before uploading to server?

3 Answers3