wordpress非弹窗表单多文件上传插件
插件名：Drag and Drop Multiple File Upload - Contact Form 7
(ps:如果是弹窗表单，不要使用这个插件Drag and Drop Multiple File Upload - Contact Form 7，而是用自带的cf7,参考http://tsctube.mmler.cn/
form结构[file your-files filetypes:jpg|png|pdf|dxf|dwg limit:20mb]
js
if ($('form input[type=file]').length != 0) {
$('form input[type=file]').attr('multiple', 'multiple');
}
)
http://decortrim.mml.digital/contact/
form结构
<label><p class="tips">Please upload only jpg, png, pdf, dxf, dwg files. Size limit is 20MB.</p><button type="button" class="chooseFile">Choose File</button><span class="myfile"></span>[mfile your-file limit:20000000 filetypes:jpg|png|pdf|dxf|dwg]</label>
js
<script>
;(function($){
$(document).ready(function(){
$(".chooseFile").click(function () {
$(".contact-form .wpcf7-drag-n-drop-file.d-none").click();
});
$(".contact-form .wpcf7-drag-n-drop-file.d-none").change(function(){
$(".myfile").empty();
var fp = $(".contact-form .wpcf7-drag-n-drop-file.d-none");
var lg = $(".contact-form .wpcf7-drag-n-drop-file.d-none")[0].files.length;
var items = fp[0].files;
var list =[];
var str ="";
if(lg > 0) {
for(var i = 0; i < lg; i ++) {
var fileName = items[i].name;
list.push(fileName);
}
str = list.join(",");
$(".myfile").css({"display":"inline-block"}).html(str);
}
});
});
})(jQuery);
</script>
css
.tips {
font-size: 12px;
margin-bottom: 12px;
}
.myfile {
display: inline-block;
font-size: 12px;
margin-bottom: 12px;
margin-left: 10px;
}
button {
display: inline-block;
@include FilsonProMedium;
text-align: center;
font-size: 12px;
line-height: 29px;
color: #455264;
width: 107px;
height: 29px;
background-color: #eef1f4;
border: none;
cursor: pointer;
}
.your-files {
display: none;
}
最新文章
- Laravel Container分析
- include指令和include标签的区别
- 如何去除 ckeditor 上传图片后在原码中留下的 style="width: 100%;height:100px"之类的代码呢？
- Nginx与Tomcat安装、配置与优化
- 【原创】构建高性能ASP.NET站点 第五章—性能调优综述（后篇）
- MySQL 使用Navicat连接MySQL8出现1251错误
- Autofac踩坑经历
- linux系统网络相关问题
- 我们一起来详细的了解react的语法以及组件的使用方法
- Gulp小记
- 一步一步详解ID3和C4.5的C++实现
- 用C#创建一个窗体，在构造函数里面写代码和在from_load事件里面写代码有什么不同？
- Mybatis学习——resultMap使用
- java方法——重载2
- 使用C++生成1-33中的6个随机数，无重复
- Graphviz(转载)
- python开发模块基础：序列化模块json,pickle,shelve
- XE下 SVG格式的图标使用方法
- Java8新特性（二）——强大的Stream API
- 剑指offer 面试10题