$(function () { initFileInput("input-id"); }) function initFileInput(ctrlName) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh', //设置语言 uploadUrl: "/fileStore/open/upload/file", //上传的地址 allowedFileExtensions: ['jpg', 'jpeg', 'gif', 'png', 'pdf', 'doc', 'docx', 'zip', 'txt', 'mp3'],//接收的文件后缀 uploadAsync: true, //默认异步上传 showUpload: true, //是否显示上传按钮 showRemove: true, //显示移除按钮 showPreview: false, //是否显示预览 showCaption: true,//是否显示标题 browseClass: "btn btn-primary", //按钮样式 dropZoneEnabled: true,//是否显示拖拽区域 //minImageWidth: 50, //图片的最小宽度 //minImageHeight: 50,//图片的最小高度 //maxImageWidth: 1000,//图片的最大宽度 //maxImageHeight: 1000,//图片的最大高度 maxFileSize: 100000,//单位为kb,如果为0表示不限制文件大小,最大100MB minFileCount: 1, maxFileCount: 1, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount: false, previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", previewFileIconSettings: { 'jpg': '<i class="fa fa-file-excel-o text-success"></i>', 'png': '<i class="fa fa-file-excel-o text-success"></i>', 'pdf': '<i class="fa fa-file-excel-o text-success"></i>', 'gif': '<i class="fa fa-file-excel-o text-success"></i>', 'mp3': '<i class="fa fa-file-excel-o text-success"></i>' }, msgFilesTooMany: "选择上传的文件数量超过允许的最大数值6!", ajaxSettings: { beforeSend: function (request) { console.log("--clientId--authorization---"); // console.log(clientId); // console.log(authorization); //设置请求头 request.setRequestHeader("ClientId", clientId); request.setRequestHeader("Authorization", authorization); } }, uploadExtraData: function () {//传递参数 return { "parma1": false, "parma2": 20000 }; } }).on("fileuploaded", function (event, data, previewId, index) { //一个文件上传成功 console.log(data); console.log('文件上传成功!' + JSON.stringify(data)); //保存上传的返回的url if (data.response.code == 0) { var url = data.response.result; alert(data.files[index].name + "上传成功!"); //保存上传的返回的url $.ajax({ type: "POST", url: '/open/file/saveCusVisitFile', contentType: 'application/json;charset=utf-8', data: JSON.stringify({//设置json "accountId": b_accountId, "remark": policyNo, "fileName": data.files[index].name, "creator": userName, "url": url }), success: function (res) { console.log('保存url信息!'); if (res.code === 0) { alert(data.files[index].name + "上传成功!"); console.log(JSON.stringify(res)); console.log('保存成功!'); } else { alertErrMsg(res.message); } } }); } else { alert(data.files[index].name + "上传失败!" + data.response.message); } //重置 $("#input-id").fileinput("clear").fileinput("reset").fileinput('refresh').fileinput('enable'); }).on('fileerror', function (event, data, msg) { //一个文件上传失败 console.log('文件上传失败!' + data.message); $("#input-id").fileinput("clear").fileinput("reset").fileinput('refresh').fileinput('enable'); }); }
参考链接:
https://www.cnblogs.com/wangjintao-0623/p/10640915.html
源码以及API地址:
bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在线API:http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo