How to create EditorFor FileUpload in asp.net mvc 4 razor?

Uploading multiple files in asp.net mvc 4 razor provides client-side validation too.

.cshtml

@using (Html.BeginForm("Create", "Profile", FormMethod.Post, new { enctype = "multipart/form-data", id = "frm_profile" }))
{
@Html.LabelFor(model => model.image)
@Html.TextBoxFor(model => model.image, new { type = "file", accept = "image/*" })
    @Html.ValidationMessageFor(model => model.image)
// for multiple file select
@Html.TextBoxFor(model => model.image, new { type = "file", accept = "image/*", multiple = "multiple" })
}

Model

[Required]
public HttpPostedFileBase image { get; set; }

// or 
[Required]
public string image { get; set; }

Controllers
HttpPostedFileBase instances. Once again, notice that the argument name matches the name of the file inputs.

[HttpPost]
public ActionResult Create(HttpPostedFileBase image)
{

if (image != null && image.ContentLength > 0)
{
    string filePath = Path.Combine(Server.MapPath("~/App_Data"), Path.GetFileName(image.FileName));
    image.SaveAs(filePath);
}

return View();
}


// For multiple file select
[HttpPost]
public ActionResult Create(List<HttpPostedFileBase> image)
{

if (image != null)
{
     foreach (var item in image)
     {
        string filePath = Path.Combine(Server.MapPath("~/App_Data"), Path.GetFileName(item.FileName));
        item.SaveAs(filePath);
     }
}

return View();
}

jquery

$.validator.addMethod('accept', function () { return true; });

File input 'accept' attribute. Usage (DEMO)
The accept attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari 6.
The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).

Note: The accept attribute can only be used with <input type="file" />, The accept attribute of the <input /> tag is not supported in Internet Explorer 9 and earlier versions.

Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.

<!-- Match all image files (image/*) -->
<input type="file" accept="image/*">

<!-- Match all video files (video/*) -->
<input type="file" accept="video/*">

<!-- Match all audio files (audio/*) -->
<input type="file" accept="audio/*">

<!-- Match all image files (image/*) and files with the extension ".someext" -->
<input type="file" accept=".someext,image/*">
<!-- See note below -->

<!-- Match all image files (image/*) and video files (video/*) -->
<input type="file" accept="image/*,video/*">

<!-- For example -->
<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

<!-- For CSV files (.csv), use -->
<input type="file" accept=".csv" />

<!-- For Excel Files 2003-2007 (.xls), use -->
<input type="file" accept="application/vnd.ms-excel" />

<!-- For Excel Files 2010 (.xlsx), use -->
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

<!-- For PDF Files, use -->
<input type="file" accept=".pdf" />

<!-- For Text Files (.txt) use -->
<input type="file" accept="text/plain" />

<!-- For HTML Files (.htm,.html), use -->
<input type="file" accept="text/html" />

CSS

input[type="file"]
{
    -moz-appearance: none;
    -webkit-appearance: none;
    text-align: left;
    -webkit-rtl-ordering: left;
    border: 1px solid #aaaaaa;
    border-radius: 4px;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
    background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
}