Чтобы загрузить файл асинхронно с Jquery, используйте следующие шаги:
шаг 1 В вашем проекте откройте менеджер Nuget и добавьте пакет (jquery fileupload (только вам нужно написать его в поле поиска, он появится и установит его)
URL: https://github.com/blueimp/jQuery-File-Upload
шаг 2 Добавьте нижеприведенные скрипты в файлы HTML, которые уже добавлены в проект путем запуска вышеуказанного пакета:
jquery.ui.widget.js
jquery.iframe-transport.js
jquery.fileupload.js
шаг 3 Запись управления загрузкой файлов в соответствии с кодом ниже:
<input id="upload" name="upload" type="file" />
шаг 4 написать метод js как uploadFile, как показано ниже:
function uploadFile(element) {
$(element).fileupload({
dataType: 'json',
url: '../DocumentUpload/upload',
autoUpload: true,
add: function (e, data) {
// write code for implementing, while selecting a file.
// data represents the file data.
//below code triggers the action in mvc controller
data.formData =
{
files: data.files[0]
};
data.submit();
},
done: function (e, data) {
// after file uploaded
},
progress: function (e, data) {
// progress
},
fail: function (e, data) {
//fail operation
},
stop: function () {
code for cancel operation
}
});
};
шаг 5 В готовой загрузке файла элемента вызова функции для запуска процесса, как показано ниже:
$(document).ready(function()
{
uploadFile($('#upload'));
});
шаг 6 Запишите контроллер MVC и Действие согласно ниже:
public class DocumentUploadController : Controller
{
[System.Web.Mvc.HttpPost]
public JsonResult upload(ICollection<HttpPostedFileBase> files)
{
bool result = false;
if (files != null || files.Count > 0)
{
try
{
foreach (HttpPostedFileBase file in files)
{
if (file.ContentLength == 0)
throw new Exception("Zero length file!");
else
//code for saving a file
}
}
catch (Exception)
{
result = false;
}
}
return new JsonResult()
{
Data=result
};
}
}