基于Bootstrap的多图片（文件也可以）上传、预览、删除、缩放、进度...显示

一、引用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代码

<input id="myFile" type="file" name="myFile" multiple class="file-loading">

对，你没看错。只需要这一行核心代码就可以了。选择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: "<i class='glyphicon glyphicon-king'></i>",                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;    };

说明：可以隐藏自身的上传按钮，用表单提交也是可以的。
插件官网
对插件的描述部分