I am trying to teach myself general web development skills. I am trying to create a image
upload with preview functionality using HTML5 FileAPI.
Till now, I have created a
file input which shows the preview of image when selected.
Html mark up is below:
<div>
<!-- Photos -->
<fieldset>
<legend>PropertyPhotos</legend>
<div class="upload-box" id="upload-box-1">
<div class="preview-box">
<img alt="Field for image cutting" id="preview_1" src="@Url.Content("~/Content/empty.png")" />
</div>
<div>
@Html.FileFor(model => model.File1)
@Html.ValidationMessageFor(model => model.File1)
</div>
</div>
<div class="upload-box" id="upload-box-2">
<div class="preview-box">
<img alt="Field for image cutting" id="preview_2" src="@Url.Content("~/Content/empty.png")" />
</div>
<div>
@Html.FileFor(model => model.File2)
@Html.ValidationMessageFor(model => model.File2)
</div>
</div>
<div class="upload-box" id="upload-box-3">
<div class="preview-box">
<img alt="Field for image cutting" id="preview_3" src="@Url.Content("~/Content/empty.png")" />
</div>
<div>
@Html.FileFor(model => model.File3)
@Html.ValidationMessageFor(model => model.File3)
</div>
</div>
</fieldset>
</div>
The
Jquery to show preview and then display the next "upload-box" is as follows:
<script type="text/javascript">
$(document).ready(function () {
// show first box
$("#upload-box-1").fadeIn();
//Get current & next step index
var stepNum = $('div.upload-box').attr('id').replace(/[^\d]/g, '');
var nextNum = parseInt(stepNum)+1;
//Get the preview image tag
var preview = $('#preview_'+stepNum);
//Load preview on
file tag change and display second upload-box
$('#File'+stepNum).change(function (evt) {
var f = evt.target.files[0];
var reader = new FileReader();
if (!f.type.match('image.*')) {
alert("The selected
file does not appear to be an image.");
return;
}
reader.onload = function (e) { preview.attr('src', e.target.result); };
reader.readAsDataURL(f);
//Show next upload-box
$("#upload-box-" + nextNum).fadeIn();
});
});
</script>
However, this code only first for the first time ... i.e. on selecting a
file - It shows a preview and then shows the next "upload-box". However, when I browse using the second
file it doesn't show any preview.
From what I have ready, I need to close the
Jquery function so that it can be initialised again but I am not sure how to do that.
Any help will be grateful.
