Загрузка файла (ов) с помощью Ajax

Определим как должна вести себя загрузка файла:

· Пользователь кликает на «загрузить».

· Открывается форма выбора файла

· Пользователь выбирает файл

· Файл загружается, или выдается ошибка о том, что что-то не так

· Если даже форма и не проходит валидацию, то файл остается загруженным и его не нужно загружать заново.

Это называется ajax-загрузка и для нее используем fineuploader (https://fineuploader.com/). Библиотека платная, но мы скачаем и соберем исходники (у нас же есть bundle!). Скачиваем исходники по ссылке: https://github.com/valums/file-uploader. Перемещаем js-файлы в папку /Scripts/fine-uploader. Css-файлы перемещаем в /Content и изображения в /Content/images. Перепишем правильно url в fineuploader.css для изображений:

.qq-upload-spinner {

display: inline-block;

background: url(" images/loading.gif");

width: 15px;

height: 15px;

vertical-align: text-bottom;

}

.qq-drop-processing {

display: none;

}

.qq-drop-processing-spinner {

display: inline-block;

background: url(" images/processing.gif");

width: 24px;

height: 24px;

vertical-align: text-bottom;

}

Файлы инициализируем в BundleConfig.cs (/App_Start/BundleConfig.cs):

bundles.Add(new ScriptBundle(" ~/bundles/fineuploader")

.Include(" ~/Scripts/fine-uploader/header.js")

.Include(" ~/Scripts/fine-uploader/util.js")

.Include(" ~/Scripts/fine-uploader/button.js")

.Include(" ~/Scripts/fine-uploader/ajax.requester.js")

.Include(" ~/Scripts/fine-uploader/deletefile.ajax.requester.js")

.Include(" ~/Scripts/fine-uploader/handler.base.js")

.Include(" ~/Scripts/fine-uploader/window.receive.message.js")

.Include(" ~/Scripts/fine-uploader/handler.form.js")

.Include(" ~/Scripts/fine-uploader/handler.xhr.js")

.Include(" ~/Scripts/fine-uploader/uploader.basic.js")

.Include(" ~/Scripts/fine-uploader/dnd.js")

.Include(" ~/Scripts/fine-uploader/uploader.js")

.Include(" ~/Scripts/fine-uploader/jquery-plugin.js")

);

bundles.Add(new StyleBundle(" ~/Content/css/fineuploader")

.Include(" ~/Content/fineuploader.css"));

Создаем контроллер FileController.cs (/Areas/Default/Controllers/FileController.cs):

public class FileController: DefaultController

{

[HttpGet]

public ActionResult Index()

{

return View();

}

public ActionResult Upload(HttpPostedFileWrapper qqfile)

{

return Json(new { result = " ok", success = true});

}

}

Метод-action Upload принимает строковое значение qqfile, я ниже рассмотрю, почему так. А сейчас создадим View для Index. Для этого:

· Создаем кнопку, при нажатии на которую мы загружаем файл.

· Файл загружается и создается превью

· Файл и превью сохраняются в файловую систему

· Метод возвращает ссылку, куда были загружены файл и превью, через Json-ответ

· Если файлы не удалось загрузить, то выдается соответствующая ошибка

· Обрабатываем json-результат и уведомляем, что файл и превью загружено

· Верификация формы и запись в БД не нужны.

View для Index:

@{

ViewBag.Title = " Index";

Layout = " ~/Areas/Default/Views/Shared/_Layout.cshtml";

}

@section styles {

@Styles.Render(" ~/Content/css/fineuploader")

}

@section scripts {

@Scripts.Render(" ~/bundles/fineuploader")

@Scripts.Render(" ~/Scripts/default/file-index.js")

}

< h2> Index< /h2>

< fieldset>

< div class=" control-group" >

< label class=" control-label" for=" Text" >

Image

< /label>

< div class=" controls" >

< div id=" UploadImage" >

Upload

< /div>

< /div>

< /div>

< div>

< img src=" " alt=" " id=" ImagePreview" />

< /div>

< /fieldset>

Наша кнопка с id=UploadImage. Добавляем file-index.js файл для обработки (/Scripts/default/file-index.js):

function FileIndex() {

_this = this;

this.ajaxFileUpload = " /File/Upload";

this.init = function () {

$('#UploadImage').fineUploader({

request: {

endpoint: _this.ajaxFileUpload

},

}).on('error', function (event, id, name, reason) {

//do something

})

.on('complete', function (event, id, name, responseJSON) {

alert(responseJSON);

});

}

}

var fileIndex = null;

$().ready(function () {

fileIndex = new FileIndex();

fileIndex.init();

});

Теперь обработаем загрузку:

public ActionResult Upload(HttpPostedFileWrapper qqfile)

{

var extension = Path.GetExtension(qqfile.FileName);

if (! string.IsNullOrWhiteSpace(extension))

{

var mimeType = Config.MimeTypes.FirstOrDefault(p => string.Compare(p.Extension, extension, 0) == 0);

//если изображение

if (mimeType.Name.Contains(" image"))

{

//тут сохраняем в файл

var filePath = Path.Combine(" /Content/files", qqfile.FileName);

qqfile.SaveAs(Server.MapPath(filePath));

return Json(new

{

success = true,

result = " error",

data = new

{

filePath

}

});

}

}

return Json(new { error = " Нужно загрузить изображение", success = false });

}

В Content добавим папку files - это будет папка пользовательских данных. Разберем код:

· Получаем qqfile (тут ничего не поменять, это параметр обусловлен fineuploader).

· Из него получаем extension.

· По extension находим mimeType. Для.jpg,.gif,.png – мы получаем mime-type типа «image/…». Таким образом, мы проверяем, что этот файл можно загрузить.

· Далее, используя имя файла, составляем абсолютный путь к папке /Content/files (которую мы заранее создали) с помощью Server.MapPath.

· Далее сохраняем файл с помощью SaveAs.

· Возвращаем имя файл в json data.filePath.

Проверяем, всё ли загружается, и приступим к созданию превью.