@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 & 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; } } }