If you want it to work as they are filling out the form, you'll need to detect the addition of each file and update your preview when a file is attached.

The following worked for me:

First, I created a custom HTML element on the form with just the following html

<div id="imageContainer"></div>

Then, I got the identifier for the Upload field (in my test form it was #q26)

Next, I bound a DOM node insertion handler to the file list/table to detect when it actually got the new entry (the a element with the file reference).

I used this approach because there is a slight delay between the input change event and the data actually becoming available, whereas the DOM event is precise.

  $("#q26 .files").bind("DOMNodeInserted DOMNodeRemoved",function(){
    // wipe the slate clean to prevent duplicated images
    $('#imageContainer img').remove();
    
    // Set delay to better support file removal
    setTimeout(function(){
      // grab each file entry
      $('#q26 .file .ellipsis').each(function(){
        // get file extension
        var extension = $(this).attr('title').split('.').pop().toUpperCase();

        // if valid image type
        if($.inArray(extension,['JPEG','JPG','GIF','PNG']) != -1){
          // append an img element for each uploaded image
          $('#imageContainer').append('<img src="'+ $(this).attr('href') +'" width="300">');
        }
      });
    },50);
  });

Only monitoring DOM insertions on the upload field is important because monitoring the entire document would generate a LOT of events.

If you strip out the inner ".each" portion and run that on document ready, that should get the images to display for the next reviewer.

NOTE: The setTimeout is there because of a brief delay on the DOM element removal. With this in place it should update successfully when files are added as well as removed.