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;
107px;
height: 29px;
background-color: #eef1f4;
border: none;
cursor: pointer;
}
.your-files {
display: none;
}