bootstrapfileinput实现文件自动上传

bootstrapfileinput实现文件自动上传

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("上传文件弹窗已关闭") })

参考资料：bohttp://otstrap上传插件fileinput自动上传&成功回调

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

注意插件版本是 version 4.2.7 .

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

Bootstrap实战教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。