Penjelasan terperinci tentang penggunaan kemahiran muat naik fail Bootstrap Fileinput component_javascript

Saya mempunyai sedikit masa lapang baru-baru ini dan meringkaskan beberapa kegunaan biasa komponen input fail bootstrap. Saya ingin berkongsinya pada platform Laman Utama Skrip untuk rujukan anda dan untuk memudahkan carian akan datang. Mohon maaf jika artikel ini tidak ditulis dengan baik.

1. Paparan kesan

1. Jenis input asal='fail' tidak dapat ditanggung untuk dilihat.

2. Input fail Bootstrap tanpa sebarang hiasan: (evolusi utama input fail bootstrap)

3. Evolusi lanjutan input fail bootstrap: budaya Cina, muat naik seret dan lepas, pengesahan sambungan fail (jika ia bukan fail yang diperlukan, ia tidak akan dimuat naik)

Seret dan lepas untuk memuat naik

Memuat naik

4. Evolusi muktamad input fail bootstrap: membolehkan berbilang fail dimuat naik oleh berbilang rangkaian pada masa yang sama.

Memuat naik

Selepas muat naik selesai

2. Contoh kod

Bagaimana pula? Sejauh mana keberkesanannya? Jangan risau, kami akan mencapai kesan di atas langkah demi langkah.

1. halaman cshtml

Perkenalkan dahulu fail js dan css yang diperlukan.

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

Kemudian tentukan input type='file' tag

<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>

Fokus pada ayat ini:

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

berbilang menunjukkan bahawa berbilang fail dibenarkan untuk dimuat naik pada masa yang sama dan class="file-loading" menunjukkan gaya teg.

2. permulaan 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;
};

Penerangan:

(1) Kaedah failinput() dihantar dalam data json, yang mengandungi banyak atribut Setiap atribut mewakili ciri semasa memulakan kawalan muat naik Jika atribut ini tidak ditetapkan, ini bermakna menggunakan tetapan lalai. Jika rakan taman ingin melihat atribut yang terkandung di dalamnya, anda boleh membuka kod sumber fileinput.js, seperti yang ditunjukkan pada penghujung:

Jika sifat ini tidak ditetapkan secara khusus, nilai lalai akan digunakan.

(2) $("#txt_file").on("fileuploaded", fungsi (event, data, previewId, index) {}Kaedah ini mendaftarkan acara panggil balik selepas muat naik selesai. Iaitu, selepas dimuat naik fail diproses lusa Masukkan kaedah ini untuk mengendalikannya

3. Kaedah sepadan C# Bahagian Belakang

Adakah anda masih ingat bahawa terdapat url parameter dalam kaedah kawalan permulaan fileinput() dalam js Nilai yang sepadan dengan url ini menunjukkan kaedah pemprosesan C# yang sepadan. Atau siarkan kaedah pemprosesan latar belakang.

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

Memandangkan projek blogger adalah untuk memuat naik excel, logik NPOI digunakan di sini Jika anda memuat naik fail seperti gambar, anda boleh menggunakan GDI untuk memproses gambar.

4. Muat naik berbilang fail pada masa yang sama

Apabila berbilang fail dimuat naik pada masa yang sama, bahagian hadapan akan menghantar berbilang permintaan tak segerak ke latar belakang, maksudnya, apabila tiga fail dimuat naik pada masa yang sama, kaedah ImportOrder di latar belakang akan dimasukkan tiga kali. . Ini membolehkan anda menggunakan multi-threading untuk memproses tiga fail pada masa yang sama.

3. Ringkasan

Ini mungkin telah selesai memperkenalkan penggunaan asas input fail bootstrap Malah, ia hanyalah komponen muat naik, dan tiada penggunaan lanjutan. Fokusnya adalah untuk menjadikan antara muka lebih mesra dan meningkatkan pengalaman pengguna dengan lebih baik.

Ini semua tentang penggunaan terperinci komponen muat naik fail Bootstrap Fileinput saya harap ia akan membantu anda!