1、引入bootstrap文件上传组件
fileinput.min.css
fileinput.min.js
2、h5代码
<input type="hidden" name="recommendImg" value="" ><div class="file-loading"><input name="upfile" type="file" multiple></div>
3、js代码
<script>// 上传图片数量控制var picLimit = 1 ;$("input[name='upfile']").fileinput({'theme': 'explorer-fas','uploadUrl': '/upload/picUpload',overwriteInitial: false,showPreview:true,showRemove:false,maxFileCount:1,msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",maxFileSize:500,allowedFileExtensions: ["jpg", "png","JPG", "PNG"],dropZoneTitle: '500KB以下\n' + 'JPG或PNG',showClose:false,showUpload: false,uploadAsync:false, //false 同步上传，后台用数组接收，true 异步上传，每次上传一个file,会调用多次接口previewClass:"uploadPreview"}).on("filebatchselected", function(e, files) {// 文件选择完直接调用上传方法。$(this).fileinput("upload");}).on('filebatchuploadsuccess',function(event,data,proviewId,index) {let url = data.response.url;$(this).parents(".recommendItem").find("input[name='recommendImg']").val(url);// 上传图片后，判断当前图片个数，是否隐藏文件上传框【注：此方法执行前，图片已经加载】let currentPicNum = $(this).parents(".recommendItem").find('img').lengthif(currentPicNum/2 >= picLimit) {$(this).parents(".input-group").css('display', 'none');}}).on('filesuccessremove', function(event, id) {//图片上传成功，点击删除后的回调方法$(this).parents(".recommendItem").find("input[name='recommendImg']").val("");// 删除图片后，判断当前图片个数，是否显示文件上传框【注：此方法执行完，图片才删除】let currentPicNum = $(this).parents(".recommendItem").find('img').lengthif (currentPicNum/2-1 < picLimit ) {$(this).parents(".input-group").css('display', 'block');}}).on('filepredelete', function(event, key, jqXHR, data) {//初始图片，点击删除后的回调方法$(this).parents(".recommendItem").find("input[name='recommendImg']").val("");// 删除图片后，判断当前图片个数，是否显示文件上传框【注：此方法执行完，图片才删除】let currentPicNum = $(this).parents(".recommendItem").find('img').lengthif (currentPicNum/2-1 < picLimit ) {$(this).parents(".input-group").css('display', 'block');}});// 注：【编辑页】 已经有图片回显了，先屏蔽图片上传选择栏// $("input[id='"+recommendNo+"']").parents(".input-group").css('display', 'none');</script>
4、上传图片数量控制
说明：在图片达到上传上限时 ，屏蔽上传按钮。未达到上限时，显示上传按钮。
因上传一张图片，会有2个对应的img标签，
故currentPicNum/2
【未达到限制】：
【达到限制】：
...
