本篇介绍如何使用bootstrap fileinput.js，file input插件功能如此强大，样式非常美观，并且支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能，最好用的文件上传组件。

文件夹结构

版本都是3.x

New Document

x

$(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: "",

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;

};

知识只有共享才能传播，才能推崇出新的知识，才能学到更多，这里写的每一篇文字/博客，基本都是从网上查询了一下资料然后记录下来，也有些是原滋原味搬了过来，也有时加了一些自己的想法，希望大家喜欢。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程

Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。