Preview images before it is uploaded for more than one image

Question

I want to be able to preview images in form before they are uploaded and I have customized <input type="file"> like
enter image description here
I need to replace rectangle with plus inside with an image

How can I do this?
It's my HTML and CSS http://jsfiddle.net/YJG79/2/

You'll need to upload the image via AJAX or through some sort of iframe implementation. [Uploadify](http://www.uploadify.com/) is a great one that I recommend you try out. It uses jQuery and a 1x1 flash pixel to allow uploading without actually submitting a form. — Lix, Oct 27 '13 at 14:23
numerous plugins you can use to do this... do some web searching for uploader plugins — charlietfl, Oct 27 '13 at 14:23
@Lix I checked the Uploadify but it doesn't show an image, just progress bars :( — Heidel, Oct 27 '13 at 14:31
Yes - but it allows you to upload the file without redirecting the user. Uploadify will fire an even once the file has been uploaded and in that event you can insert the path to the recently uploaded file. So once you catch the event you can modify your page and add the `src` attribute to an `` tag to display the image. — Lix, Oct 27 '13 at 14:36
You can't *actually* show the image before it's uploaded - but you can let them upload it to a temporary location and then only after they view and confirm the upload - you can move the file to the final location on the server. — Lix, Oct 27 '13 at 14:37
What server-side technology are you using? You can't do it with just HTML or CSS — Richard Peck, Oct 27 '13 at 14:38
[This](http://stackoverflow.com/questions/14069421/in-html5-how-to-show-preview-of-image-before-upload) might be what you are searching for. — Sumurai8, Oct 27 '13 at 14:41
@Lix Yes, you can actually show an image before it is uploaded. FileReader is the tool for this job. This question was not well researched and has attracted some uninformed comments as a result. This should be closed. — Ray Nicholus, Oct 27 '13 at 14:43
@RayNicholus - looks like you're correct. However this post was not tagged with the [tag:html5] tag. — Lix, Oct 27 '13 at 14:45
@Lix Can you explain me please, how to modify my page and add the `src` attribute to an `` tag to display the image if i will use `Uploadify` ? — Heidel, Oct 27 '13 at 17:28
You'll have to take a look at uploadifys documentation... There are examples there of how to use it. Stack overflow is not used a substitute for original documentation or tutorials... — Lix, Oct 27 '13 at 17:30
@lix does not really matter if the html5 tag was present or not. The answer to the question must involve FileReader. — Ray Nicholus, Oct 27 '13 at 17:36
I tried to use code from the first similar question, http://jsfiddle.net/YJG79/9/, but it doesn't work, please, can someone explain me what's wrong? — Heidel, Oct 27 '13 at 18:59
@Heidel - the example works perfectly. You're going to have to a *little* or the work yourself. Take a look at the JS console, there was an error in there that you had not included the jQuery library. Include it and the example will work. — Lix, Oct 27 '13 at 20:12

Swati · Accepted Answer · 2013-10-28T11:09:40.643

Yes, you can display preview of image before uploading form

Try this Example

Thanks.

Updating the answer:

Try this JSFiddle example

HTML

<form name="" method="post" action="#" class="feedback-form-1">
    <fieldset>
        <div class="input-file-row-1">
            <div class="upload-file-container">
                <img id="preview_image" src="#" alt="" />
                <div class="upload-file-container-text">
                    <div class = 'one_opacity_0'>
                        <input type="file" id="patient_pic" label = "add" />
                    </div>
                    <span> Add Photo </span>
                </div>
            </div>
        </div>
    </fieldset>
</form>

JQuery:

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

 $("#patient_pic").live("change",function(){
    readURL(this, "#preview_image")
 });

CSS:

.input-file-row-1:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.input-file-row-1{
    display: inline-block;
    margin-top: 25px;
    position: relative;
}

#preview_image {
  display: none;
  width: 90px;
  height: 90px;
  margin: 2px 0px 0px 5px;
  border-radius: 10px;
}

.upload-file-container { 
    position: relative; 
    width: 100px; 
    height: 137px; 
    overflow: hidden;   
    background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat;
    float: left;
    margin-left: 23px;
} 

.upload-file-container-text{
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #719d2b;
    line-height: 17px;
    text-align: center;
    display: block;
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100px; 
    height: 35px;
}

.upload-file-container-text > span{
    border-bottom: 1px solid #719d2b;
    cursor: pointer;
}

.one_opacity_0 {
  opacity: 0;
  height: 0;
  width: 1px;
  float: left;
}

I realize that you were just trying to help, but simply posting the code from another (linked) [answer](http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded/4459419#4459419) without any attribution is not how we operate on [so]. You need to correctly state where you took the code from. — Lix, Oct 27 '13 at 20:18
@Heidel I have used the same code in my own application, and it works very nicely. I would try it out with your example and let you know soon. — Swati, Oct 28 '13 at 06:41
@Lix yes i understand what you are trying to convey me but the same thing i have applied in my application and which works perfectly, so i just gave it for the reference. I would try to give exact solution soon. Thanks. — Swati, Oct 28 '13 at 06:44
@Heidel I have updated the answer, check the jsfiddle link, let me know if you still facing any issues. Thanks. — Swati, Oct 28 '13 at 11:17

Preview images before it is uploaded for more than one image

1 Answers1

Linked