I have form like this
I must do file uploader which will display uploaded image here (in circle).
OK I can upload image and save on server using that or something similar it But how can I display it in circle immediately?
And is it necessary to save photo on hard drive?
You can display image immediate after selecting with the help of jQuery.
<div class="formRow">
<label for="contact_name" class="fieldLabel">
File Upload
</label>
<div class="field">
<input type="file" name="FileUpload" id="FileUpload" />
</div>
</div>
<div class="formRow">
<label for="contact_name" class="fieldLabel">
</label>
<div id="dvPreview">
</div>
</div>
jQuery(function ($) {
jQuery('#FileUpload').change(function () {
jQuery('#dvPreview').html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test($(this).val().toLowerCase())) {
if (jQuery.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
jQuery('#dvPreview').show();
jQuery('#dvPreview')[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = jQuery(this).val();
}
else {
if (typeof (FileReader) != "undefined") {
jQuery('#dvPreview').show();
jQuery('#dvPreview').append("<img style='width:200px; height:100px' />");
var reader = new FileReader();
reader.onload = function (e) {
jQuery('#dvPreview img').attr("src", e.target.result);
}
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
}
}
else {
}
});
});
When you return the view after uploading. then please return image path in model or viewbag and on View level check if there is some value in that then populate it in image tag.. this can be done asynchronusly also.
