Not able to upload file using Ajax.BeginForm() asynchronously
You cannot upload files using AJAX. This is not supported. If you want to do that you could either use some file upload plugin such as Uploadify
or Blueimp File Upload or use the HTML 5 File API
if the client browser supports it.
Ajax.BeginForm in MVC to upload files
That is complicated better use jquery forms plugin.
Here is the sample:
Html.BeginForm
@using (Html.BeginForm("YourAction", "YourController"))
{
@Html.AntiForgeryToken()
<input type="file" name="files"><br>
<input type="submit" value="Upload File to Server">
}
Action Method
[HttpPost]
[ValidateAntiForgeryToken]
public void YourAction(IEnumerable<HttpPostedFileBase> files)
{
if (files != null)
{
foreach (var file in files)
{
// Verify that the user selected a file
if (file != null && file.ContentLength > 0)
{
// extract only the fielname
var fileName = Path.GetFileName(file.FileName);
// TODO: need to define destination
var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
file.SaveAs(path);
}
}
}
}
Progress Bar
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success">0%</div>
</div>
Jquery & Form script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {
var bar = $('.progress-bar');
var percent = $('.progress-bar');
var status = $('#status');
$('form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});
})();
</script>
Update...
People who are getting issue of calling action method twice is due to Ajax.BeginForm, just convert it to Html.BeginForm(). For more clarification and to download sample code please refer at this blog.
Ajax.BeginForm does not work asynchronous
when this happens its almost always because your script files aren't loaded, see below post :
http://completedevelopment.blogspot.com/2011/02/unobstrusive-javascript-in-mvc-3-helps.html
Set the mentioned flag in the web.config:
Include a reference to the jQuery library ~/Scripts/jquery-1.4.4.js
Include a reference to the library that hooks this magic at ~/Scripts/jquery.unobtrusive-ajax.js
Uploading both data and files in one form using Ajax?
The problem I had was using the wrong jQuery identifier.
You can upload data and files with one form using ajax.
PHP + HTML
<?php
print_r($_POST);
print_r($_FILES);
?>
<form id="data" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<button>Submit</button>
</form>
jQuery + Ajax
$("form#data").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
});
Short Version
$("form#data").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.post($(this).attr("action"), formData, function(data) {
alert(data);
});
});
Related Topics
Directory.Getcurrentdirectory() Not Working on Linux
C#: Throwing Custom Exception Best Practices
How to Explain C++ Pointers to a C#/Java Developer
Register Iauthenticationmanager with Simple Injector
What Is the Equivalent of "Case When Then" (T-Sql) with Entity Framework
How to Ask The Socket to Wait for More Data to Come
Serializing Strings Containing Apostrophes with JSON.Net
Call C++ Function Pointer from C#
Check a String to See If All Characters Are Hexadecimal Values
Why Is ASP.NET Identity Identitydbcontext a Black-Box
Retrieve an Object from Entityframework Without One Field
Logoff Interactive Users in Windows from a Service
Why Can't Reference to Child Class Object Refer to the Parent Class Object