Preview an Image withing input Frame before uploading

Question

I saw one preview image and delete before uploading design online and I've been trying to do it but nothing really works. I want to be able to preview an image within the input element frame. Something like this:

Sorry my english is not that good. I tried doing it this way

HTML CODE

<form>
<div class="row row-images">
  <label for="image">Images*</label>                   
  <div class="column image_container">
        <div class="post-image-collection">
        <label id="list">

        </label>
      <label class="post-image post-image-placeholder mrm mts empty">
        <input type="file" id="Photofile" name="images[]" required="required" multiple />
  <span class="icon-camera"><img src="https://cdn.onlinewebfonts.com/svg/img_134042.png"></span>
  <p class="uppercase">Photo</p>

</label>
</div>                        
      </div>
     </form>

CSS CODE

form .post-image-collection {
    margin: -20px 0px 0px -20px;
    overflow: hidden;
    }
    form .post-image {
    position: relative;
    float: left;
    height: 152px;
    width: 170px;
    background: #f2f2f2;
    border: 1px dashed #ccc;
    padding: 0;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    }
    .mrm {
    margin-right: 20px;
    }
    .mts {
    margin-top: 10px;
    }
    form .post-image img {
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
    vertical-align: top;
    border-radius: 3px;
    overflow: hidden;
    }
    form .post-image .icon-camera {
    display: none;
    }
    form .post-image input {
    position: absolute;
    z-index: 2;
    opacity: 0;
    width: 100%;
    height: 100%;
    }
    form .post-image.empty {
    position: relative;
    float: left;
    height: 130px;
    width: 130px;
    background: #f2f2f2;
    border: 1px dashed #ccc;
    padding: 0;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    vertical-align: top;
    }

    form .post-image.empty .icon-camera {
    display: block;
    height: 30px;
    line-height: 30px;
    left: 40%;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 30px;
    cursor: inherit;
    margin: -15px 0px 0px -15px;
    }
    form .post-image.empty .icon-camera img {
    height: 60px;
    width: 60px;
    }
    form .post-image.empty input {
    cursor: pointer;
    }

    form .post-image p, .file_container-orange p {
    margin: 10px 0;
    margin: 1rem 0;
    text-align: center;
    font-family: "OpenSansSemiBold",sans-serif;
    }
    .uppercase {
    text-transform: uppercase;
    }
    #list{
    float: left;
    }
    .thumb {
    height: 130px;
    width: 130px;
    margin-right: 20px;
    margin-top: 10px;
    }
    .remove_img_preview {
    position: relative;
    top: -46px;
    right: 40px;
    font-size: 20px;
    line-height: 1;
    padding: 4px 6px;
    background: white;
    border-radius: 0px 0px 0px 3px;
    text-align:center;
    cursor:pointer;
    }
    .remove_img_preview:before {
    content: "×";
    }

Javascript Code

var count=0;
function handleFileSelect(evt) {
    var $fileUpload = $("input#Photofile[type='file']");
    count=count+parseInt($fileUpload.get(0).files.length);

    if (parseInt($fileUpload.get(0).files.length) > 4 || count>3) {
        alert("You can only upload a maximum of 3 photos");
        count=count-parseInt($fileUpload.get(0).files.length);
        evt.preventDefault();
        evt.stopPropagation();
        return false;
    }
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
        if (!f.type.match('image.*')) {
            continue;
        }
        var reader = new FileReader();

        reader.onload = (function (theFile) {
            return function (e) {
                var span = document.createElement('span');
                span.innerHTML = ['<img class="thumb mrm mts" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
                document.getElementById('list').insertBefore(span, null);
            };
        })(f);

        reader.readAsDataURL(f);
    }
}

$('#Photofile').change(function(evt){
    handleFileSelect(evt);
});  

$('#list').on('click', '.remove_img_preview',function () {
    $(this).parent('span').remove();

    //this is not working...
    var i = array.indexOf($(this));
    if(i != -1) {
        array.splice(i, 1);
    }
    // tried this too:
    //$(this).parent('span').splice( 1, 1 );

    count--;
});

Please any help?

Damn, I thought someone could have an idea on how to do it. Guess I will forget about this design. — Douggy Budget, Feb 17 '18 at 18:35

score 0 · Accepted Answer · answered Feb 17 '18 at 19:18

0

I have fixed your code. Find it here: https://plnkr.co/edit/zjKMcigaZ3t6kLZv9aOc?p=preview. Also you don't need to check if the uploaded files is an image using javascript. You can prevent user from uploading other files using the accept attribute. Like this:

accept="image/*"

Let me know if you have any doubts.

answered Feb 17 '18 at 19:18

NiK648

1,484
1
9
18

I appreciate your help. I already did this before and Thank you for pointing out my mistake. But what I meant is that, I want the image to preview inside the box with a delete button like on the picture above instead of previewing on the side. Is it possible to do it that way? – Douggy Budget Feb 17 '18 at 19:28
Those image boxes are separete boxes with different inputs. The first one is the one after you have uploaded an image and the remaining ones are the ones before you upload an image – Douggy Budget Feb 17 '18 at 19:32
So from the start you want to have 3 boxes(photo 1, photo 2, photo 3). On uploading an image, you want to preview it in that corresponding box with a close button. Is that what you need? – NiK648 Feb 17 '18 at 19:36
Yeah that's exactly what I want. Sorry my english not that good. That's what I've been trying to do all day but couldn't do it unfortunately. :( – Douggy Budget Feb 17 '18 at 19:40
I have modified the plunker as per your requirements. Please check. – NiK648 Feb 17 '18 at 20:07
Sorry. Dont know php. – NiK648 Feb 18 '18 at 10:41
Hey man are there? I have finally succeeded to solve my upload of multiple images using PHP. But the issue now is that the JavaScript seems to be disturbing. For example, Whenever I click on the upload image button and select for example 3 images at once, It uploads and adds all the images to my database without a giving an error . But When I choose the images one by one, It just uploads and adds only one image to my database. Can you quickly have a look at the JS? I tried to test it using echo count($_files) and exit function and it's clearly not the php part having a problem. – Douggy Budget Feb 19 '18 at 10:35
I'm using now this https://plnkr.co/edit/ayxRbyYOt3QNJAbkXiMz?p=preview – Douggy Budget Feb 19 '18 at 10:35
this plunker doesnt seem to work. its not doing anything. – NiK648 Feb 19 '18 at 10:40
I just noticed. On my machine in the main code it works fine. And I copy exactly the script for the image preview – Douggy Budget Feb 19 '18 at 11:20
I remember you fixed it, before I decided to change it. You told me something like that "I have fixed your code. Also you don't need to check if the uploaded files is an image using javascript. You can prevent user from uploading other files using the accept attribute. Like this: accept="image/*". Can you please quickly check it like you did the first time? – Douggy Budget Feb 19 '18 at 11:27
Yeah I did. Its the answer that I posted above. – NiK648 Feb 19 '18 at 11:29
yeah I saw that answer and It was what I originally intended to do. But before that answer you corrected my code using the first code I sent to you https://plnkr.co/edit/ayxRbyYOt3QNJAbkXiMz?p=preview and told me some errors. – Douggy Budget Feb 19 '18 at 11:31

Preview an Image withing input Frame before uploading

1 Answers1