Display uploaded images on button click

Question

On click of button preview i need the uploaded images to be shown ,the scripts it's working fine for changing event but not for the click one.

HTML

 <form action="test.php" enctype="multipart/form-data" id="mainform" method="post" name="mainform">
Imagine 1:<br>
 <input type="file" name="img1" id="img1"><br>
     <br><br>     
Imagine 2 :<br>
 <input type="file" name="img2" id="img2"><br>
     <br>
 Imagine 3 :<br>
 <input type="file" name="img3" id="img3"><br> 
     <br>
 Imagine 4 :<br>
 <input type="file" name="img4" id="img4"><br>    
     <br>
 Imagine 5 :<br>
 <input type="file" name="img5" id="img5"><br>   
     <br>
 Imagine 6 :<br>
 <input type="file" name="img6" id="img6"><br>   
     <br>
 Imagine 7 :<br>
 <input type="file" name="img7" id="img7"><br>    
     <br>
 Imagine 8 :<br>
 <input type="file" name="img8" id="img8"><br>    
     <br>
 Imagine 9 :<br>
 <input type="file" name="img9" id="img9"><br>   
     <br>
 Imagine 10 :<br>
 <input type="file" name="img10" id="img10"><br>    
     <br>
 Imagine 11 :<br>
 <input type="file" name="img11" id="img11"><br> 
     <br>
 Imagine 12 :<br>
 <input type="file" name="img12" id="img12"><br>    
     <br>
 Imagine 13 :<br>
 <input type="file" name="img13" id="img13"><br>    
     <br>
 Imagine 14 :<br>
 <input type="file" name="img14" id="img14"><br>     
     <br>
 Imagine 15 :<br>
 <input type="file" name="img15" id="img15"><br>    
     <br />
     Preview:
     <br />
     <input type="checkbox" id="previz" />Preview
</form>
<div id="#previzdiv">
<img src="" id="preview-img1">
<img src="" id="preview-img2">
<img src="" id="preview-img3">
<img src="" id="preview-img9">
<img src="" id="preview-img5">
</div>

Jquery:

$("#center2 #forme #previz").change(function(){
    if(this.checked){
        for(i=1;i<15;i++){
            j = $("form#mainform #img"+i);
            console.log(j);
            readURL(j);
        }
    }
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            imgId = '#preview-'+$(input).attr('id');
            $(imgId).attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("form#mainform input[type='file']").change(function(){
    readURL(this);
    console.log(this);
});

The console log from "j" should look like <input type="file" name="img1" id="img1"> yet it different from what change event is console logging.Is the approach correct? JSFIDDLE:https://jsfiddle.net/eLss3ojx/8/

`#center2` , `#forme ` elements not appear at `html` at OP ? Calling `readURL(j)` from within `$("#center2 #forme #previz").change(function(){}` `event` handler not initiating `change` event of `input type="file"` elements ? — guest271314, May 06 '15 at 16:48
@guest271314 i did not include all div's , event is working , i can't get the on that "for" — Orlando GTh, May 06 '15 at 16:55
Issue only with `id="img1"` ? Also , try including `var` at `var i = 1` ? — guest271314, May 06 '15 at 16:58
@guest271314 i am not retarded.The problem is that i don't know how to select all uploaded file dataurl and put them into the img element with the correct id on button click , for change event is working — Orlando GTh, May 06 '15 at 17:01
No. Not made , not intended to make, any such innuendo or comment as to "retarded" ? fwiw, At least here, would use plain language, directly, for such a statement; without ambiguity. That aside, not certain interpret Question correctly ? Does `for` loop actually , currently, retrieve `files` object from `input` elements ? _"Display uploaded images on button click"_ No `click` event appear at Question ? Can create stacksnippets http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ , jsfiddle http://jsfiddle.net to demonstrate ? — guest271314, May 06 '15 at 17:06
Appear to be `html` elements within `textarea` element ? `textarea` renders contents as `text` ; what is expected result of including `html` elements within `textarea` ? http://jsfiddle.net/eLss3ojx/9/ — guest271314, May 06 '15 at 17:46
@guest271314 `html` elements within `textarea` are for preview reason. — Orlando GTh, May 06 '15 at 17:54
Tried `<img/>` http://jsfiddle.net/xqecdgdt/ ? Substituted `div` for `textarea` at http://jsfiddle.net/eLss3ojx/10/ — guest271314, May 06 '15 at 18:21
@guest271314 you are not getting it , for every check/uncheck of the Preview button i need my `img` element and his `src` attribute inside Preview area to get `input` elemtent dataUrl. It's working when i change images when preview is check , it's does not work when i click preview images src is not changing. — Orlando GTh, May 06 '15 at 18:49
Checking , un-checking an `input type="checkbox"` should not be able to dynamically select user files; though could open the files dialog - for user by triggering `change` event at an `input type="file"` element, for user to _possibly_ select an image. Images could then be available as `data URI` as return value from calling `readURL`. Could utilize single `input type="files" multiple="true" />` to render "preview" for each of the selected files; no need for multiple `input type="files"` elements; see http://stackoverflow.com/questions/28856729/upload-multiple-image-using-ajax-php-and-jquery — guest271314, May 06 '15 at 19:21

score 1 · Accepted Answer · answered May 06 '15 at 20:01

Try utilizing single input type="file" element having multiple attribute set, loop through selected files object , append img element for each file within user selected files object

var previews = $("#previews");
// append `img` element "preview" of single , multiple
// selected `files` to `#preview` element
$("input[type=file]").on("change", function(e) {
  previews.empty();
  Array.prototype.slice.call(e.target.files)
    .forEach(function(file, idx) {
      var reader = new FileReader();
      reader.onload = function(event) {
        $("<span />", {
            "html": "<br />" + file.name
          }).add("<br />")
          .add(
            $("<img />", {
              "src": event.target.result,
              "class": idx
            })).appendTo(previews);
      };
      reader.readAsDataURL(file);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="file" accepts="image/*" multiple="true" />
<div id="previews"></div>

Display uploaded images on button click

1 Answers1