Detailed explanation of the usage of Bootstrap Fileinput file upload component_javascript skills

in my spare time recently, i summarized some common uses of the bootstrap fileinput component. i would like to share them on the script home platform for your reference and to facilitate future searches. please forgive me if this article is not well written.

1. effect display

1. the original input type='file' is simply unbearable to look at.

2. bootstrap fileinput without any decoration: (primary evolution of bootstrap fileinput)

3. advanced evolution of bootstrap fileinput: chinese culture, drag-and-drop upload, file extension verification (if it is not a required file, it will not be uploaded)

drag and drop to upload

uploading

4. the ultimate evolution of bootstrap fileinput: allows multiple files to be uploaded by multiple threads at the same time.

uploading

after uploading

2. code examples

how about it? how's the effect? don't worry, we will achieve the above effects step by step.

1. cshtml page

first introduce the required js and css files.

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

then define the 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>

focus on this sentence:

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

multiple indicates that multiple files are allowed to be uploaded at the same time, and class="file-loading" indicates the style of the tag.

2. js initialization

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

description:

(1) the fileinput() method is passed in a json data, which contains many attributes. each attribute represents the characteristics when initializing the upload control. if these attributes are not set, it means using the default set up. if garden friends want to see what attributes it contains, you can open the source code of fileinput.js, as shown at the end:

if these properties are not set specifically, their default values ​​will be used.

(2)$("#txt_file").on("fileuploaded", function (event, data, previewid, index) {}this method registers the callback event after the upload is completed. that is, after the uploaded file is processed the day after tomorrow enter this method to process.

3. backend c# corresponding method

do you still remember that there is a parameter url in the initialization control method fileinput() in js? the value corresponding to this url indicates the corresponding processing method of c#. or post the background processing method.

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

since the blogger's project is to upload excel, the logic of npoi is used here. if you are uploading files such as pictures, you can use gdi to process the pictures.

4. upload multiple files at the same time

when multiple files are uploaded at the same time, the frontend will send multiple asynchronous requests to the background. that is to say, when three files are uploaded at the same time, the importorder method of the background will be entered three times. this allows you to use multi-threading to process three files at the same time.

3. summary

this has probably finished introducing the basic use of bootstrap fileinput. in fact, it is just an upload component, and there are no advanced uses. the focus is to make the interface more friendly and better increase the user experience.

this is all about the detailed usage of the bootstrap fileinput file upload component. i hope it will be helpful to you!