Hi skp,
If you want to upload without 3rd party libraries use FormData.
This will work on all the latest browsers.
HTML
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', ['$scope', '$http', function ($scope, $http) {
$scope.UploadFile = function () {
var files = document.getElementById("fuFiles").files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('file' + i, files[i]);
}
$http.post("/Home/Upload/", formData, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
}).success(function (r) {
$scope.Files = r;
}).error(function (r) {
});
};
} ]);
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input id="fuFiles" type="file" multiple="multiple" />
<button type="button" ng-click="UploadFile()">Upload</button>
<hr />
<table border="0" cellpadding="0" cellspacing="0">
<tr ng-repeat="file in Files">
<td><img ng-src="{{file}}" style="height: 100px; width: 100px" /><br /><br /></td>
</tr>
</table>
</div>
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Upload()
{
//Create the Directory.
string path = Server.MapPath("~/Uploads/");
if (!System.IO.Directory.Exists(path))
{
System.IO.Directory.CreateDirectory(path);
}
//Save the Files.
foreach (string key in Request.Files)
{
HttpPostedFileBase postedFile = Request.Files[key];
// Save in folder.
postedFile.SaveAs(path + System.IO.Path.GetFileName(postedFile.FileName));
System.IO.BinaryReader binaryReader = new System.IO.BinaryReader(postedFile.InputStream);
byte[] bytes;
using (System.IO.BinaryReader br = new System.IO.BinaryReader(postedFile.InputStream))
{
bytes = br.ReadBytes(postedFile.ContentLength);
}
// Code to save in Database.
FilesEntities entities = new FilesEntities();
tblFile file = new tblFile
{
Name = System.IO.Path.GetFileName(postedFile.FileName),
ContentType = postedFile.ContentType,
Data = bytes
};
entities.tblFiles.Add(file);
entities.SaveChanges();
}
List<string> images = new List<string>();
foreach (string file in System.IO.Directory.GetFiles(path))
{
images.Add("Uploads/" + System.IO.Path.GetFileName(file));
}
return Json(images);
}
}
Screenshot
For more details refer below article.
