Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Well I tried for what you said and got the image preview in my application doing so:</p> <p><strong>My view</strong>:</p> <pre><code>&lt;% if current_user %&gt; &lt;p&gt;Welcome &lt;%= current_user.email %&gt;&lt;/p&gt; &lt;tr&gt;&lt;input type="file" id="files" name="files[]" multiple /&gt; &lt;img id="list" src="#" alt="Image" width="100" height="100"&gt;&lt;/img&gt;&lt;/tr&gt; &lt;% end %&gt; &lt;style&gt; .thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; } &lt;/style&gt; &lt;script type="text/javascript"&gt; function handleFileSelect(evt) { var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. var span = document.createElement('span'); span.innerHTML = ['&lt;img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/&gt;'].join(''); document.getElementById('list').insertBefore(span, null); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); &lt;/script&gt; </code></pre> <p>As you see above code is done by me taking into account a single user image preview before upload. But the same you can do for multiple users by changing the query and a little code for multiple users.</p> <p>Cheers!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload