|
一、引用js、css
//核心js、css https://cdn.bootcss.com/bootstrap-fileinput/4.4.2/css/fileinput.min.css https://cdn.bootcss.com/bootstrap-fileinput/4.4.2/js/fileinput.min.js //显示中文需要的js https://cdn.bootcss.com/bootstrap-fileinput/4.4.2/js/locales/zh.js
二、Html代码
对，你没看错。只需要这一行核心代码就可以了。选择multiple属性支持多图上传
三、JS代码
$(function () {
//0.初始化fileinput
var oFileInput = new FileInput();
oFileInput.Init("myFile", "/afterSale/uplode/photo");
});
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'],//接收的文件后缀
//showUploadedThumbs:false,
// uploadClass: 'hidden',
showUpload: false, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-info", //按钮样式
dropZoneEnabled: false,//是否显示拖拽区域
//minImageWidth: 150, //图片的最小宽度
//minImageHeight: 150,//图片的最小高度
//maxImageWidth: 150,//图片的最大宽度
//maxImageHeight: 150,//图片的最大高度
maxFileSize: 2048,//单位为kb，如果为0表示不限制文件大小
maxFileCount: 2, //表示允许同时上传的最大文件个数
minFileCount: 1,
enctype: 'multipart/form-data',
validateInitialCount: true,
previewFileIcon: "",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
fileActionSettings : {
showUpload: false,
//showRemove: false
showZoom:false
}
});
//导入文件上传完成之后的事件
$("#myFile").on("fileuploaded", function (event, data, previewId, index) {
alert(data.response.code);
// $("#divControl").hide();
});
}
return oFile;
};
说明：可以隐藏自身的上传按钮，用表单提交也是可以的。 插件官网 对插件的描述部分
|