python bootstrap-fileinput示例_bootstrapfileinput实现文件自动上传
bootstrap fileinput文件上傳插件功能如此強(qiáng)大,樣式非常美觀,并且支持上傳文件預(yù)覽,ajax同步或異步上傳,拖曳文件上傳等炫酷的功能,完全沒(méi)有理由不去使用,
JS引用:
HTML:
JS:
//自動(dòng)上傳文件-JS
function initFileInput(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //設(shè)置語(yǔ)言
uploadUrl: uploadUrl, //上傳的地址 (該方法需返回JSON字符串)
allowedFileExtensions: ['xlsx', 'xls', 'txt'],//接收的文件后綴
showUpload: false, //是否顯示上傳按鈕
showCaption: true,//是否顯示標(biāo)題
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) {
//通過(guò) data.response.Json對(duì)象屬性 獲得返回?cái)?shù)據(jù)
errors = data.response.ErrorList;
}
})
}
//上傳JS初始化
$(function () {
initFileInput("fileUpload", "Controllers/Action");
});
//獲取上傳文件彈窗關(guān)閉動(dòng)作
$("#fileUpload").change(function () { alert("上傳文件彈窗已關(guān)閉") })
參考資料:bootstrap上傳插件fileinput自動(dòng)上傳&成功回調(diào)
bootstrap上傳插件fileinput功能非常強(qiáng)大,本文給出一例自動(dòng)上傳&上傳成功回調(diào)的用例.核心就是調(diào)用 filebatchselected 文件選擇完成事件實(shí)現(xiàn)的,文件上傳成功的事件是 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('處理成功');
}
});
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個(gè)精彩的專題:Bootstrap學(xué)習(xí)教程
Bootstrap實(shí)戰(zhàn)教程
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
總結(jié)
以上是生活随笔為你收集整理的python bootstrap-fileinput示例_bootstrapfileinput实现文件自动上传的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: sublime编写python路径报错怎
- 下一篇: ubuntu c++ 实现自动回车键功能