How to upload a file via ajax

Question

I have a file upload that does not use a form to upload a file, instead I want to upload it using ajax. I tried the following approach, but I can not transfer the file. It is zero. Please help. Below is my implementation.

HTML and jQuery function

<div id="Upload"> <input type="file" accept="application/x-shockwave-flash" id="virtualtourfile" enctype="multipart/form-data"/> <input type="button" value="Upload" id="btnUpload"/> </div> $('#btnUpload').click(function () { $.ajax({ url: "uploadvideo", type:'POST', data: $("#virtualtourfile:file"), success: function (data) { } }); }); 

controller

 public ActionResult UploadVideo(HttpPostedFileBase file) { return Json("", JsonRequestBehavior.AllowGet); } 

Answer 1

There are several options. If the client browser supports the HTML5 File API , you can use it to upload the file asynchronously to the server. If you need to support legacy browsers that do not support this API, you can use the file upload component, for example Uploadify , Fine uploader , jquery form , ... The advantage of these plugins is that they will check the capabilities of the browser and if it supports the API File, he will use it, otherwise he will abandon older methods, such as hidden frames or flash movies.

Answer 2

I used several plugins and I found a plugin to add to Kendo UI, here is a link how it works:

http://demos.kendoui.com/web/upload/async.html

and you can find an example project for Asp.Net MVC 3 here: http://www.kendoui.com/forums/ui/upload/upoad-with-mvc.aspx

  [HttpPost] public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments) { // The Name of the Upload component is "attachments" foreach (var file in attachments) { // Some browsers send file names with full path. This needs to be stripped. var fileName = Path.GetFileName(file.FileName); var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName); file.SaveAs(physicalPath); } // Return an empty string to signify success return Content(""); }