Bootstrap Fileの使い方の詳しい説明 ファイル入力コンポーネント_javascriptスキル

最近、暇なときに、ブートストラップ ファイル入力コンポーネントの一般的な使用法をいくつかまとめました。参考として、また今後の検索を容易にするために、スクリプト ホーム プラットフォームで共有したいと思います。この記事がうまく書かれていない場合はご容赦ください。

1. エフェクトの表示

1. 元の input type='file' は見るに耐えません。

2. 装飾のないブートストラップ ファイル入力: (ブートストラップ ファイル入力の主な進化)

3. ブートストラップ ファイル入力の高度な進化: 中国文化、ドラッグ アンド ドロップ アップロード、ファイル拡張子の検証 (必須ファイルでない場合はアップロードされません)

ドラッグ アンド ドロップしてアップロードします

アップロード中

4. ブートストラップ ファイル入力の究極の進化: 複数のファイルを複数のスレッドで同時にアップロードできます。

アップロード中

アップロード後

2. コード例

どうですか？効果はどうですか？上記の効果は段階的に実現していきますので、ご安心ください。

1. cshtml ページ

まず、必要な js および css ファイルを導入します。

//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")

次に、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 id="请选择excel文件">请选择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>

この文に注目してください:

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

multiple は複数のファイルを同時にアップロードできることを示し、class="file-loading" はタグのスタイルを示します。

2. js の初期化

$(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;
};

説明:

(1) fileinput() メソッドは、多くの属性を含む json データで渡されます。各属性は、アップロード コントロールの初期化時の特性を表します。これらの属性が設定されていない場合は、デフォルト設定を使用することを意味します。庭の友達がそれに含まれる属性を知りたい場合は、最後に示すように、fileinput.js のソース コードを開くことができます。

これらのプロパティが特に設定されていない場合は、デフォルト値が使用されます。

(2)$("#txt_file").on("fileuploaded", function (event, data,reviewid, index) {}このメソッドは、アップロードの完了後にコールバック イベントを登録します。つまり、アップロードが完了した後、ファイルは明後日に処理されます。処理するにはこのメソッドを入力してください。

3. バックエンド c# 対応メソッド

js の初期化制御メソッド fileinput() にパラメータ url があったことを覚えていますか? この url に対応する値は、c# の対応する処理メソッドを示します。またはバックグラウンド処理方法を投稿してください。

[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 ? 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 };
}

ブロガーのプロジェクトは excel をアップロードすることであるため、ここでは npoi のロジックが使用されます。写真などのファイルをアップロードする場合は、gdi を使用して写真を処理できます。

4. 複数のファイルを同時にアップロードする

複数のファイルが同時にアップロードされると、フロントエンドは複数の非同期リクエストをバックグラウンドに送信します。つまり、3 つのファイルが同時にアップロードされると、バックグラウンドの importorder メソッドが 3 回入力されます。 。これにより、マルチスレッドを使用して 3 つのファイルを同時に処理できるようになります。

3. 概要

これで、ブートストラップ ファイル入力の基本的な使用方法の紹介は終わりました。実際には、これは単なるアップロード コンポーネントであり、高度な使用方法はありません。焦点は、インターフェイスをよりフレンドリーにし、ユーザー エクスペリエンスを向上させることです。

これは、bootstrap fileinput ファイル アップロード コンポーネントの詳細な使用法に関するすべてです。お役に立てば幸いです。