sunny kachwala

sunny kachwala

  • 2.1k
  • 11
  • 1.3k

post-with-multiple-images-using-asp-net-mvc-get-data-on-post

Aug 20 2016 5:39 AM
@using Sample.Web.Models @model PostImagesInfo @{     AjaxOptions options = new AjaxOptions();     options.HttpMethod = "POST";     options.InsertionMode = InsertionMode.Replace;     options.UpdateTargetId = "divContainer";     options.LoadingElementId = "divProgress"; } @using (Ajax.BeginForm("PostImagesInfo", "Post", options, new { name = "multiple_upload_form", id = "multiple_upload_form", enctype = "multipart/form-data" }))  {     @*@Html.AntiForgeryToken()*@     <div role="application" class="wizard clearfix" id="steps-uid-0"> <div class="steps clearfix"> <ul role="tablist"> <li role="tab" class="first current" aria-disabled="false" aria-selected="true"> <a id="steps-uid-0-t-0" href="javascript:void(0);" aria-controls="steps-uid-0-p-0"> <div class="overflow-h"> <h2>1.Post</h2> <i class="rounded-x fa fa-check"></i> </div> </a> </li> <li role="tab" class="@(ViewBag.PostAddressInfo != null ? (ViewBag.PostAddressInfo ? "second current" : "disabled ") : "disabled")" aria-disabled="true"> <a id="steps-uid-0-t-1" href="javascript:void(0);" aria-controls="steps-uid-0-p-1"> <div class="overflow-h"> <h2>2.Personal info</h2> <i class="rounded-x fa fa-home"></i> </div> </a> </li> <li role="tab" class="@( ViewBag.PostImagesInfo != null ? (ViewBag.PostImagesInfo ? "third current" : "disabled ") : "disabled") aria-disabled="true"> <a id="steps-uid-0-t-2" href="javascript:void(0);" aria-controls="steps-uid-0-p-2"> <div class="overflow-h"> <h2>3.Images</h2> <i class="rounded-x fa fa-img"></i> </div> </a> </li> <li role="tab" class="@(ViewBag.PostOtherInfo != null ? (ViewBag.PostOtherInfo ? "last current" : "disabled ") : "disabled")" aria-disabled="true"> <a id="steps-uid-0-t-2" href="javascript:void(0);" aria-controls="steps-uid-0-p-3"> <div class="overflow-h"> <h2>4.Rent</h2> <i class="rounded-x fa fa-bars"></i> </div> </a> </li> </ul> </div> <section class="billing-info" style="margin-top: 10px;"> <div class="row"> <div class="col-md-12 md-margin-bottom-40"> <h2>Images &amp; Add some good images here</h2> <div class="billing-info-inputs checkbox-list"> <section> <div class="col-sm-12">                                 @*<input type="file" class="multi with-preview" maxlength="5" accept="png|jpg" multiple id="fileupload" />*@                             </div> <div class="row"> <div class="col-sm-12"> <div id="dvPreview"></div> </div> </div> <div class="row"> <div class="col-sm-12"> <input multiple type="file" id="WithEvents" class="multi with-preview " />                                     @*<input type="file" class="multi with-preview image-upload" id="WithEvents" name="fileUpload" multiple />*@                                  </div> </div>                             @*<div class="row"> <div class="col-sm-12"> <div id="F9-Log"></div> </div> </div>*@                             <div class="row"> <div class="col-md-6"> <input type="submit" class="btn-u btn-u-sea-shop pull-left margin-bottom-20" name="prevBtn" value='Previous' /> </div> <div class="col-md-6"> <input type="submit" class="btn-u btn-u-sea-shop pull-right margin-bottom-20" name="nextBtn" value='Next' id="upload-images" /> </div> </div> </section> </div> </div> </div> </section> </div>  }  <script>     $(function () {          $("#fileupload").change(function () { if (typeof (FileReader) != "undefined") { var dvPreview = $("#dvPreview");                 dvPreview.html(""); var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;                 $($(this)[0].files).each(function () { var file = $(this); if (regex.test(file[0].name.toLowerCase())) { var reader = new FileReader();                         reader.onload = function (e) { var img = $("<div class='col-md-2'>" + "<div class='product-img product-img-brd'> " + "<a href='#'><img alt='' src=" + e.target.result + " class='full-width img-responsive'></a>" + "</div>" + "<div class='product-description product-description-brd margin-bottom-30'>" + "<div class='overflow-h margin-bottom-5'>" + "<div class='pull-left'>" + "<a class='MultiFile-remove' href='#WithEvents_wrap'>x</a>" + "</div>" + "<div class='pull-right'>" + "<input type='radio' name='IsMain' value='" + file[0].name.toLowerCase() + "'checked>" + "</div>" + "</div>" + "</div>" + "</div>");                             dvPreview.append(img); }                         reader.readAsDataURL(file[0]); } else {                         alert(file[0].name + " is not a valid image file.");                         dvPreview.html(""); return false; } }); } else {                 alert("This browser does not support HTML5 FileReader."); } }); var filesModel = []; var files = {};         $('#WithEvents').MultiFile({             max: 5,             accept: 'jpg|png',             onFileRemove: function (element, value, master_element) {                 $('#F9-Log').append('<li>onFileRemove - ' + value + '</li>') },             afterFileRemove: function (element, value, master_element) {                 $('#F9-Log').append('<li>afterFileRemove - ' + value + '</li>') },             onFileAppend: function (element, value, master_element) {                 $('#F9-Log').append('<li>onFileAppend - ' + value + '</li>') },             afterFileAppend: function (element, value, master_element) {                 $('#F9-Log').append('<li>afterFileAppend - ' + value + '</li>') },             onFileSelect: function (element, value, master_element) {                 $('#F9-Log').append('<li>onFileSelect - ' + value + '</li>') },             afterFileSelect: function (element, value, master_element) {                 $('#F9-Log').append('<li>afterFileSelect - ' + value + '</li>') },             onFileInvalid: function (element, value, master_element) {                 $('#F9-Log').append('<li>onFileInvalid - ' + value + '</li>') },             onFileDuplicate: function (element, value, master_element) {                 $('#F9-Log').append('<li>onFileDuplicate - ' + value + '</li>') },             onFileTooMany: function (element, value, master_element) {                 $('#F9-Log').append('<li>onFileTooMany - ' + value + '</li>') },             onFileTooBig: function (element, value, master_element) {                 $('#F9-Log').append('<li>onFileTooBig - ' + value + '</li>') },             onFileTooMuch: function (element, value, master_element) {                 $('#F9-Log').append('<li>onFileTooMuch - ' + value + '</li>') } }); }); </script>
 
public class PostImagesInfo { public List<PostImageInfo> ImageInfo { get; set; } } public class PostImageInfo { private Int64 _postImageId; public Int64 PostImageId { get { return _postImageId; } set { _postImageId = value; } } private Int64 _postID; public Int64 PostID { get { return _postID; } set { _postID = value; } } private string _imageName; public string ImageName { get { return _imageName; } set { _imageName = value; } } private string _imagePath; public string ImagePath { get { return _imagePath; } set { _imagePath = value; } } private bool _isMain; public bool IsMain { get { return _isMain; } set { _isMain = value; } }  }
 

Answers (3)