多图上传加验证加修改file样式
选择图片
<div class="file-box"> <input type="file" name="img[]" class="form-control file-btn" id="img" multiple onchange="onchageUp(this)">选择图片 </div> <div> <div class="box" style="display: flex;justify-content: space-between;"></div> </div>
var len = 0; function onchageUp(ev){ var patter = /(\.*.jpg$)|(\.*.png$)|(\.*.gif$)|(\.*.bmp$)/; var url = ev.files; len += ev.files.length; if(!patter.test($(ev).val())){ alert('系统不支持图片的格式'); }else if(len>5){ alert('上传数量超过限制'); ev.outerHTML = ev.outerHTML//重新加载 }else { $.each(url, function(i){ var path = window.URL.createObjectURL(url[i]); $('.box').append("<div><img src='"+ path +"'></div>"); }); } }
改变file样式
.file-box{ display: inline-block; position: relative; padding: 3px 5px; overflow: hidden; color:#fff; background-color: #ccc; } .file-btn{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; outline: none; background-color: transparent; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0; opacity: 0; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步