Вам нужно вызвать событие, прочитав фактический файл
reader.readAsDataURL(file);
или reader.readAsText(file);
тогда вы можете вставить изображение:
$span.html('<img src="' + event.target.result + '" />')
или текст:
$span.html(event.target.result)
$("body").on("change", ".file", function(event) {
showPreview(event);
})
function showPreview(event) {
console.log("showPreview started");
var $span = $(event.target).prev();
var file = event.target.files[0];
console.log("file loaded: ", file);
var reader = new FileReader();
console.log("reader initiated: ", reader);
reader.onload = function(event) {
console.log(event.target.result);
$span.html('<img src="' + event.target.result + '" />')
};
reader.readAsDataURL(file);
}
label {
margin: 0 auto;
display: block;
width: 200px;
height: 100px;
}
.preview {
display: inline-block;
width: 50px;
height: 50px;
border: solid 5px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<span class="preview"></span>
<input type="file" class="file">
</label>
<label>
<span class="preview"></span>
<input type="file" class="file">
</label>
<label>
<span class="preview"></span>
<input type="file" class="file">
</label>
<label>
<span class="preview"></span>
<input type="file" class="file">
</label>