Detaillierte Erläuterung der Verwendung von Bootstrap Fileinput-Datei-Upload-Komponenten_Javascript-Fähigkeiten

Ich habe in letzter Zeit etwas Freizeit und habe einige häufige Verwendungszwecke der Bootstrap-Dateieingabekomponente zusammengefasst. Ich möchte sie auf der Script Home-Plattform als Referenz und zur Erleichterung zukünftiger Suchvorgänge veröffentlichen. Bitte verzeihen Sie mir, wenn dieser Artikel nicht gut geschrieben ist.

1. Effektanzeige

1. Der ursprüngliche Eingabetyp = „Datei“ ist einfach unerträglich anzusehen.

2. Bootstrap-Dateieingabe ohne jegliche Dekoration: (primäre Weiterentwicklung der Bootstrap-Dateieingabe)

3. Fortgeschrittene Weiterentwicklung der Bootstrap-Dateieingabe: Chinesische Kultur, Drag-and-Drop-Upload, Überprüfung der Dateierweiterung (wenn es sich nicht um eine erforderliche Datei handelt, wird sie nicht hochgeladen)

Zum Hochladen ziehen und ablegen

Hochladen

4. Die ultimative Weiterentwicklung der Bootstrap-Dateieingabe: Ermöglicht das gleichzeitige Hochladen mehrerer Dateien durch mehrere Threads.

Hochladen

Nachdem der Upload abgeschlossen ist

2. Codebeispiele

Wie wäre es damit? Wie effektiv ist es? Machen Sie sich keine Sorgen, wir werden die oben genannten Effekte Schritt für Schritt erzielen.

1. CSHTML-Seite

Führen Sie zunächst die erforderlichen JS- und CSS-Dateien ein.

//bootstrap fileinput
bundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include(
"~/Content/bootstrap-fileinput/js/fileinput.min.js",
"~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js"));
bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include(
"~/Content/bootstrap-fileinput/css/fileinput.min.css"));
@Scripts.Render("~/Content/bootstrap-fileinput/js")
@Styles.Render("~/Content/bootstrap-fileinput/css")

Dann definieren Sie das Tag „input type='file“

<form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">请选择Excel文件</h4>
</div>
<div class="modal-body">
<a href="~/Data/ExcelTemplate/Order.xlsx" class="form-control" style="border:none;">下载导入模板</a>
<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
</div></div>
</div>
</div>
</form>

Konzentrieren Sie sich auf diesen Satz:

<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />

multiple gibt an, dass mehrere Dateien gleichzeitig hochgeladen werden dürfen, und class="file-loading" gibt den Stil des Tags an.

2. js-Initialisierung

$(function () {
//0.初始化fileinput
var oFileInput = new FileInput();
oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder");
});
//初始化fileinput
var FileInput = function () {
var oFile = new Object();
//初始化fileinput控件（第一次初始化）
oFile.Init = function(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
//初始化上传控件的样式
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式 
//dropZoneEnabled: false,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount:true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
});
//导入文件上传完成之后的事件
$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
$("#myModal").modal("hide");
var data = data.response.lstOrderImport;
if (data == undefined) {
toastr.error('文件格式类型不正确');
return;
}
//1.初始化表格
var oTable = new TableInit();
oTable.Init(data);
$("#div_startimport").show();
});
}
return oFile;
};

Beschreibung:

(1) Die fileinput()-Methode wird in JSON-Daten übergeben, die viele Attribute enthalten, wenn die Upload-Steuerung initialisiert wird. Wenn diese Attribute nicht festgelegt sind, bedeutet dies, dass die Standardeinstellung verwendet wird. Wenn Gartenfreunde sehen möchten, welche Attribute darin enthalten sind, können Sie den Quellcode von fileinput.js öffnen, wie am Ende gezeigt:

Wenn diese Eigenschaften nicht speziell festgelegt sind, werden die Standardwerte verwendet.

(2) $("#txt_file").on("fileuploaded", Funktion (Ereignis, Daten, Vorschau-ID, Index) {}Diese Methode registriert das Rückrufereignis, nachdem der Upload abgeschlossen ist. Das heißt, nach dem Hochladen Datei wird übermorgen verarbeitet. Geben Sie diese Methode ein, um sie zu verarbeiten

3. Backend-C#-entsprechende Methode

Erinnern Sie sich noch daran, dass es in der Initialisierungskontrollmethode fileinput() in js eine Parameter-URL gibt, die dieser URL die entsprechende Verarbeitungsmethode von C# angibt? Oder posten Sie die Hintergrundverarbeitungsmethode.

[ActionName("ImportOrder")]
public object ImportOrder()
{
var oFile = HttpContext.Current.Request.Files["txt_file"];
var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>();
#region 0.数据准备
var lstExistOrder = orderManager.Find();
var lstOrderNo = lstExistOrder.Select(x => x.ORDER_NO).ToList();
var lstTmModel = modelManager.Find();
var lstTmMaterial = materialManager.Find();
//var iMax_Import_Index = lstExistOrder.Max(x => x.IMPORT_INDEX);
//iMax_Import_Index = iMax_Import_Index == null &#63; 0 : iMax_Import_Index.Value;
#endregion
#region 1.通过Stream得到Workbook对象
IWorkbook workbook = null;
if (oFile.FileName.EndsWith(".xls"))
{
workbook = new HSSFWorkbook(oFile.InputStream);
}
else if(oFile.FileName.EndsWith(".xlsx"))
{
workbook = new XSSFWorkbook(oFile.InputStream);
}
if (workbook == null)
{
return new { };
}
//...............处理excel的逻辑
//orderManager.Add(lstOrder);
lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList();
return new { lstOrderImport = lstOrderImport };
}

Da das Projekt des Bloggers darin besteht, Excel hochzuladen, wird hier die Logik von NPOI verwendet. Wenn Sie Dateien wie Bilder hochladen, können Sie GDI zum Verarbeiten der Bilder verwenden.

4. Laden Sie mehrere Dateien gleichzeitig hoch

Wenn mehrere Dateien gleichzeitig hochgeladen werden, sendet das Frontend mehrere asynchrone Anforderungen an den Hintergrund. Das heißt, wenn drei Dateien gleichzeitig hochgeladen werden, wird die ImportOrder-Methode im Hintergrund dreimal eingegeben . Dadurch können Sie Multithreading verwenden, um drei Dateien gleichzeitig zu verarbeiten.

3. Zusammenfassung

Die Einführung der grundlegenden Verwendung der Bootstrap-Dateieingabe ist wahrscheinlich abgeschlossen. Tatsächlich handelt es sich lediglich um eine Upload-Komponente, und es gibt keine erweiterten Verwendungsmöglichkeiten. Der Schwerpunkt liegt darauf, die Benutzeroberfläche benutzerfreundlicher zu gestalten und das Benutzererlebnis besser zu verbessern.

Hier geht es um die detaillierte Verwendung der Bootstrap Fileinput-Datei-Upload-Komponente. Ich hoffe, sie wird Ihnen hilfreich sein!