![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Загрузка файла (ов) с помощью 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. Проверяем, всё ли загружается, и приступим к созданию превью.
|