bootstrap fileinput文件上传插件功能如此强大，样式非常美观，并且支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能，完全没有理由不去使用，

JS引用：

HTML:

JS:

//自动上传文件-JS

function initFileInput(ctrlName, uploadUrl) {

var control = $('#' + ctrlName);

control.fileinput({

language: 'zh', //设置语言

uploadUrl: uploadUrl, //上传的地址 (该方法需返回JSON字符串)

allowedFileExtensions: ['xlsx', 'xls', 'txt'],//接收的文件后缀

showUpload: false, //是否显示上传按钮

showCaption: true,//是否显示标题

browseClass: "btn btn-primary", //按钮样式

//previewFileIcon: "",

uploadExtraData: { ID: "123" }

}).on('filebatchselected', function (event, data, id, index) {

$(this).fileinput("upload");

}).on("fileuploaded", function (event, data) {

if (data.response) {

//通过 data.response.Json对象属性 获得返回数据

errors = data.response.ErrorList;

}

})

}

//上传JS初始化

$(function () {

initFileInput("fileUpload", "Controllers/Action");

});

//获取上传文件弹窗关闭动作

$("#fileUpload").change(function () { alert("上传文件弹窗已关闭") })

参考资料：bootstrap上传插件fileinput自动上传&成功回调

bootstrap上传插件fileinput功能非常强大,本文给出一例自动上传&上传成功回调的用例.核心就是调用 filebatchselected 文件选择完成事件实现的,文件上传成功的事件是 fileuploaded .

注意插件版本是 version 4.2.7 .

$("#update_csv").fileinput({

showUpload: false,

language:'zh',

uploadAsync:true,

dropZoneEnabled:false,

uploadUrl:'http://www.soyiyuan.com/',

maxFileCount: 1,

maxImageWidth: 600,

resizeImage: false,

showCaption: false,

showPreview: false,

browseClass: "btn btn-primary btn-lg",

allowedFileExtensions : ['csv', 'txt'],

previewFileIcon: ""

}).on("filebatchselected", function(event, files) {

$(this).fileinput("upload");

})

.on("fileuploaded", function(event, data) {

if(data.response)

{

alert('处理成功');

}

});

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

Bootstrap实战教程

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