I have been facing challenges while working on an ASP.NET MVC3 application where I am developing a custom image gallery. The browser being targeted is IE9, which rules out the option of using HTML5 File API. All my code resides within a strongly typed Razor view with @using Html.BeginForm. My goal is to enable users to add or remove multiple images before submitting them.
After some research, I discovered that there is no direct way to preview images in IE9 before saving them. As a workaround, I had to move the gallery code outside the main form. While I can successfully upload images to the server, displaying the newly added images without refreshing the page poses a challenge. This contradicts my initial objective of providing users with a preview-only experience and saving only upon form submission.
Based on my knowledge, AJAX is typically used for such tasks, but I am struggling to implement it correctly in my code. Here is what I currently have, although I am unsure if I am heading in the right direction:
using(Html.BeginForm("UploadPicture", "Forms", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<span class="document-image-frame">
<input type="file" name="file" />
<input type="submit" value="OK" class="blabla" />
</span>
}
Additionally, I attempted to work with this script to obtain the path of the newly uploaded image without refreshing the page:
$(document).on('click', '.blabla', function () {
if (confirm('Do you want to save the image?')) {
$.ajax({
url: this.href,
type: 'POST',
context: this,
success: function (result) {
$(this).closest('span').remove();
$("#ajaxBusy").remove();
}
});
}
return false;
})
This script was originally designed for different purposes. Although the confirmation prompt is not necessary at this point, I decided to retain it for now.