Меня недавно пощадили. Я суммировал некоторые распространенные использование компонентов FileInput Bootstrap. Я поделюсь им с сетевой платформой Wulin для вашей ссылки, а также удобно для будущих поисков. Пожалуйста, простите меня за плохое написание этой статьи.
1. Эффект дисплея
1. исходный ввод типа = 'файл' настолько невыносим, чтобы посмотреть на него.
2. Bootstrap FileInput без какого -либо украшения: (Первичная эволюция Bootstrap FileInput)
3. Расширенная эволюция Bootstrap FileInput: китайская культура, загрузка перетаскивания, проверка расширения файла (если файл не требуется, он не будет загружен)
Перетаскивать и сбросить загрузку
Загрузка
4. Bootstrap FileInput Ultimate Evolution: позволяет загружать несколько файлов одновременно по нескольким потокам.
Загрузка
После завершения загрузки
2. Примеры кода
Как насчет этого? Насколько эффективно? Не волнуйтесь, мы достигнем вышеуказанных результатов шаг за шагом.
1. CSHTML PAGE
Во -первых, представьте необходимые файлы JS и CSS.
// bootstrap fileInputBundles.Add (New ScriptBundle ("~/content/bootstrap-fileinput/js"). include ("~/content/bootstrap-fileinput/js/fileinput.min.js", "~/content/bootstrap-fileinput/js/fileinput_locale_zh.js"); StyleBundle ("~/content/bootstrap-fileinput/css"). Include ("~/content/bootstrap-fileinput/css/fileInput.min.css"));@scripts.render ("~/content/bootstrap-fileinput/js")@styles.render ("~/content/bootstrap-fileinput/csss")@render ("~/content/bootstrap-fileinput/js")Затем определите тег ввода типа = 'file'
<form> <div id = "mymodal" tabindex = "-1" rol = "dialog" aria-labelledby = "mymodallabel"> <div rol = "document"> <div> <div> <button-hidder = "data-dismiss =" modal "Aria-label =" close "> <pan aria-hidden =" true "> × </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </spеновый id="myModalLabel">Please select Excel file</h4></div><div><a href="~/Data/ExcelTemplate/Order.xlsx" style="border:none;">Download import template</a><input type="file" name="txt_file" id="txt_file" multiple /></div></div></div></div></form>
Сосредоточьтесь на этом предложении:
<input type = "file" name = "txt_file" id = "txt_file" multy />
Несколько означает, что несколько файлов разрешено загружаться одновременно, а class = "Загрузка файлов" означает стиль тега.
2. Инициализация JS
$ (function () {// 0. initiaze fileInputVar OfileInput = new FileInput (); OfileInput.init ("txt_file", "/api/orderapi/importorder");}); // Инициализировать файл iinputVar fileInput = function () {varipile = obj uploadUrl) {var control = $ ('#' + ctrlname); // Инициализировать стиль контроля загрузки. Showcaption: False, // Делает ли название браузер-браузерскую браузер: «btn btn-primary», // кнопка стиля // dropzoneenemangement: false, // делает область перетаскивания // минимума-поводка: 50, // минимум-типа с изображением // минимум: 50, // минимум максимальной высоты // максимум: 1000, // // максимум. Picture // MaximageHeight: 1000, // Максимальная высота изображения // maxFilesize: 0, // Блок-KB. True, PreviewFileicon: «<i class = 'glyphicon Glyphicon-king'> </i>», msgfilestoomany: «Выберите количество загруженных файлов ({n}) превышает максимально разрешенное значение {m}! previewId, index) {$ ("#mymodal"). modal ("hide"); var data = data.response.lstorderimport; if (data == не определено) {toastror.error ('Тип формата файла неверно'); return;} // 1. TableInit (); otable.init (data); $ ("#div_startimport"). Show ();});} return ofile;};иллюстрировать:
(1) Метод FileInput () передается в данных JSON, которые имеют много атрибутов. Каждый атрибут представляет характеристики при инициализации управления загрузкой. Если ни один из этих атрибутов не установлен, это означает, что настройки по умолчанию используются. Если вы хотите увидеть, какие свойства находятся внутри него, вы можете открыть исходный код fileInput.js, как показано в конце:
Если эти свойства не установлены специально, значения по умолчанию будут использоваться.
(2) $ ("#TXT_FILE"). ON ("FileUploaded", функция (событие, данные, предварительный проведите, индекс) {} Этот метод регистрирует событие обратного вызова после загрузки. То есть после обработки загруженного файла на следующий день после дня после его обработки, он вводит метод для его обработки.
3. Методы, соответствующие фону C#
Помните ли вы, что есть URL -адрес параметров в методе инициализации FileInput () в JS? Соответствующее значение этого URL указывает соответствующий метод обработки C# после дня. Или опубликовать метод обработки фоновой обработки.
[ActionName ("ImportROURD")] Public Object ImportRoder () {var Ofile = httpContext.current.Request.files ["txt_file"]; var lordorderimport = новый список <dto_to_order_import> ();#region 0.data preparation var lestexistorder = ordermanager.finder (); x.order_no) .tolist (); var lsttmodel = modelmanager.find (); var lstmmaterial = materialManager.find (); // var imax_import_index = lstexistorder.max (x => x.import_index); // imax_import_index = imax_import_index == null? 0: imax_import_index.value;#endregion#region 1. Получить объект рабочей книги через Workboubing Stream iworkbook = null; if (ofile.filename.endswith (". Xls")) {workbook = new hssfworkbook (ofile.inputStream);} else (ofile.filename.endswith (". Xssfworkbook (ofile.inputstream);} if (Workbook == null) {return new {};} // ............ обрабатывать Excel Logic //orderManager.Add(LORDER); LORDOREIMPORT = LSTORDORDIMPORT.OrderBy (x => x.Import_statu) .tolistist ();Поскольку проект блогера заключается в загрузке Excel, здесь используется логика NPOI. Если вы загружаете изображения и другие файлы, вы можете использовать GDI для обработки изображений.
4. Загрузите несколько файлов одновременно
Когда несколько файлов загружаются одновременно, стойка регистрации отправит на фон несколько асинхронных запросов. То есть, когда три файла загружаются одновременно, метод импорта в фоновом режиме будет входить три раза. Это позволяет вам обрабатывать три файла одновременно, используя несколько потоков.
3. Резюме
Основное использование Bootstrap FileInput примерно введено. На самом деле, это загруженный компонент, и усовершенствованных употреблений нет. Ключ должен сделать интерфейс более дружелюбным и лучше увеличить пользовательский опыт.
Я так много расскажу вам об использовании компонентов загрузки файла FileInput FileInput. Я надеюсь, что это будет полезно для вас!