Вход плагин-файл загрузки файла Bootstrap-это хороший элемент управления загрузкой файла, но в поиске и использовании не так много случаев. При его использовании вы также пересекаете реку, коснувшись каменного шага за шагом. Этот элемент управления представлен на интерфейсе, а загрузка, которую я использовал ранее, является более красивой и имеет более мощные функции. Эта статья в основном основана на моем собственном корпусе кода Framework, внедряя использование ввода файла, плагин загрузки файла.
1. Введение в ввод файла для плагина загрузки файла.
Адрес домашней страницы этого плагина: http://plugins.krajee.com/file-input. Вы можете увидеть много демонстрационных дисплеев отсюда: http://plugins.krajee.com/file-basic-usage-demo.
Это улучшенный элемент управления входом в файл HTML5, расширение Bootstrap 3.x, реализация предварительного просмотра загрузки файлов, многопрофильной загрузки и других функций.
Вообще говоря, нам нужно представить следующие два файла для нормального использования плагина:
Bootstrap-fileinput/css/fileinput.min.css
Bootstrap-fileinput/js/fileinput.min.js
Простой эффект интерфейса заключается в следующем. Как и многие элементы управления файлами загрузки, он может принимать различные типы файлов. Конечно, мы также можем указать конкретный тип файла и другие функции, которые принимаются.
Если необходимо учитывать китайскую культуру, необходимо ввести документы:
Bootstrap-fileinput/js/fileinput_locale_zh.js
Таким образом, на основе коллекции пакетов MVC, мы можем добавить файлы, которые им необходимы в коллекцию.
// Добавить поддержку для управления Bootstrap-fileinput CSS_Meteronic.include ("~/content/myplugins/bootstrap-fileinput/css/fileinput.min.css"); js_meteronic.include ("~/content/myplugins/bootstrap-fileinput/js/fileinput.min.js"); js_meteronic.include ("~/content/myplugins/bootstrap-fileinput/js/fileinput_locale_zh.js"); js_meteronic.include ("~/content/myplugins/bootstrap-fileinput/js/fileinput_locale_zh.js");Таким образом, мы можем представить китайское описание интерфейса и подсказки на странице, как показано в следующем интерфейсе.
2. Использование ввода файла для загрузки файла
Вообще говоря, мы можем определить общую функцию JS для инициализации этого управления плагином, как показано в следующем коде функции JS.
// инициализировать функцию FileInput Control (First инициализация) initFileInput (ctrlName, uploadUrl) {var control = $ ('#' + ctrlname); control.fileinput ({ranguage: 'zh', // установить язык uploadurl: uploadurl, // загруженный адрес разрешенные файлы. Style PreviewFileicon: "<i class = 'glyphicon Glyphicon-king'> </i>",});}В коде страницы мы размещаем элемент управления загрузкой файла, как показано в следующем коде.
<div style = "height: 500px"> <input id = "file-portrait1" type = "file"> </div>
Таким образом, код инициализации нашего кода скрипта заключается в следующем:
// инициализировать управление файлом control (первая инициализация) initfileInput ("file-portrait", "/user/editportrait");Это завершает инициализацию управления. Если нам нужно загрузить файл, то нам также нужен код JS для обработки событий, загруженных клиентом, а также нужен фоновый контроллер MVC для обработки операции сохранения файлов.
Например, мой код для сохранения данных формы выглядит следующим образом.
// Добавить запись FormValidate ("ffAdd", function (form) {$ ("#add"). Modal ("hide"); // Отправить параметры конструкции на фоновый var postdata = $ ("#ffadd"). Serializearray (); $ .post (url, postdata, function (json) {var data = $. {/ Добавить обработку портрета initportrait (data.data1); }}). error (function () {showtips ("Вам не разрешено использовать эту функцию, пожалуйста, свяжитесь с администратором, чтобы справиться с ней.");}); });Среди них мы заметили код логики обработки часть сохранения файлов:
// Добавить обработку загрузки портрета initportrait (data.data1); // Использовать написанный идентификатор для обновления $ ('#file-portrait'). FileInput ('upload');Первая строка кода заключается в восстановлении загруженного дополнительного контента, такого как информация идентификатора пользователя, чтобы мы могли создать некоторые дополнительные данные на основе этих идентификаторов для загрузки и обработки для фона.
Эта функция в основном переназначает идентификатор для облегчения получения последних дополнительных параметров при загрузке. Это то же самое, что и загрузка режима обработки.
// Инициализировать информацию о изображении функция initportrait (ctrlname, id) {var control = $ ('#' + ctrlname); var ImageUrl = '/pictureAlbum/getPortrait? id =' + id + '& r =' + math.random (); // Важно, необходимо обновить дополнительное содержание параметра управления, и контроль инициализации изображения. ],}); }Как мы видели ранее, адрес, который я загрузил: «/user/editportrait». Я также объявлю эту фоновую функцию, надеясь дать вам полный код корпуса для обучения.
/// <summary> /// Загрузить пользовательский аватар Image /// </summary> /// <param name = "id"> идентификатор пользователя </param> /// <return> </return> public actionResult editportrait (int id) {commonresult result = new CommonResult (); try {var files = request.files; if (files! = null && files.count> 0) {userInfo info = bllFactory <user> .instance.findbyid (id); if (info! = null) {var filedata = readfilebytes (файлы [0]); result.success = bllfactory <user> .instance.updatePersonImageBytes (userImageType.personPortrait, id, fileData); }}} catch (Exception ex) {result.errormessage = ex.message; } вернуть tojsoncontent (result); }Таким образом, мы построили вышеуказанную логику сохранения и обработки пользователя, и файлы могут быть нормально сохранены в фоновой файловой системе, и в то же время в базе данных записывается некоторая необходимая информация.
Конечно, в дополнение к использованию его для обработки портретных изображений пользователя, мы также можем использовать их для создания обработки обработки альбомов изображений. Конкретный интерфейс заключается в следующем.
Код инициализации для этой части заключается в следующем:
// Инициализировать элемент управления FileInput (первая инициализация) $ ('#file-portrait'). FileInput ({ranguage: 'ZH', // Установить язык uploadUrl: "/fileUpload/upload", // загрузка адреса разрешенного fileextensions: ['jpg', 'png', 'gif'], // Полученный файл, maxfilecount: 100, egxontecount: 100, 100, igh 'Multipart/Form-Data', ShowUpload: true, // делает кнопку «Загрузка» отображение: false, // Это браузерновое браузер: ({n}) превышает максимально допустимое значение {m}! ",});Выше приведено подробное объяснение опыта программы Metronic Development Bootstrap Metronic, представленной редактором для вас [пять] использование подключаемого модуля для загрузки файла файла Bootstrap подробно объясняется. Я надеюсь, что это будет полезно для всех. Если вы хотите узнать больше информации, обратите внимание на веб -сайт wulin.com!