Show image preview after image upload - ruby-on-rails

Question

My view contains detail of various employees and I have to upload image for each and save at last.I want to see image preview for each image before save but it takes localhost path and do not show image preview.
It's showing error :"NetworkError: 404 Not Found -localhost:3000/rails.png"
In View
<% #person.each do |person| %>
<td><%= person.name %></td>
<td><%= person.date %></td>
<td><input id="<%= person.id %>" type='file' class="imageUploader" multiple="true" ></td>
<td class="image_container"> <img id="image_<%= person.id %>" src="#" alt="Image" width="100" height="100"></td>` here
</tr>
<% end %>
In appliction.js::
$('.imageUploader').change(function() {
var target_image = $(this).val();
$(this).parent('td').parent("tr").children('td.image_container').html("<img src="+target_image+">");
console.log(target_image);
});

Answer 1

Guyz,
Got another one.............`
FILEFIELD = {}
$(document).ready(function() {
$('.files').change(function() {
FILEFIELD = $(this)
var fr = new FileReader;
fr.onload = function() {
var img = new Image;
img.onload = function() {
var c=$(FILEFIELD).parent("td").parent("tr").children("td").children(".images")[0];
var ctx=c.getContext("2d");
ctx.drawImage(img,0,0,50,50);
}
img.src = fr.result;
};
fr.readAsDataURL(this.files[0]);
});
});
And finally working

Answer 2

Well I tried for what you said and got the image preview in my application doing so:
My view:
<% if current_user %>
<p>Welcome <%= current_user.email %></p>
<tr><input type="file" id="files" name="files[]" multiple />
<img id="list" src="#" alt="Image" width="100" height="100"></img></tr>
<% end %>
<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
<script type="text/javascript">
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 = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].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);
</script>
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.
Cheers!