jQuery引起的用layer弹出层上传文件不能获取文件名的解决(thinkphp5)

一、问题

在用thinkphp5做到用layer弹出层上传文件过程中，一直不能成功。详细代码如下：
HTML代码：

<div id="importBox" v-show="!showListBtn" style="display:none"><form id="importForm" method="post" enctype="multipart/form-data"  style="padding-left:20px;text-align:center;"><br/><input id="importFile" name="importFile" type="file" style="width:330px"  value=""  accept=".xls,.xlsx"/><p>仅允许导入"xls"或"xlsx"格式文件！<br/>　　</form>
</div>

JS代码：

//获取模板当中的url地址url = $(obj).attr('daoru_url');var $importFile = $('<div id="wrapper"><div class="content"></div></div>'),$content = $importFile.children(".content")$importFile.appendTo('body')layer.open({type: 1,area: ['500px', '300px'],shadeClose: false,shade:0.6,// anim : 3,skin: 'layui-layer-molv',title:"导入数据",//content: $("#importBox").html(),content:jQuery("#importBox"),btn: ['下载模板','确定', '关闭'],btn1: function(index){window.location.href = baseURL+"org/orgmainfo/template?token="+localStorage.getItem("token");layer.close(index);},btn2: function(index,layero){var form=document.getElementById('importFile').value;formData = new FormData();formData.append('file', $("#importFile")[0].files[0]);$.ajax({url: url,dataType: 'json',type: 'POST',data: formData,cache: false,processData: false,  // 不处理数据contentType: false,success: function(r){console.log(r);if(r.code == 0){alert("导入成功！");vm.reload();}else{alert(r.msg);}}});//layer.close(index);},btn3: function(index){layer.close(index);}});

控制器代码略

测试中，发现弹出层能够弹出，显示正常，但不能获得上传文件。

弹出层正常

测试FormData中不能获得文件名称

alert测试为空

二、问题解决

百度了很多文章，不能解决。最后看到两篇文章在layer.open中设置content值时方法不一样，于是把content: $("#importBox").html()换成content:jQuery("#importBox")，运行居然成功！

调用alert调试截图如下：

三、分析

这两者有何不同？
到layui官网查看，它也是采用的第一种方法，见下图（layui官网示例代码截图，https://layer.layui.com/?alone）。

于是到w3school网站查了关于jQuery的一些知识。在w3school中对这两种方法都是认可的，效果也是一样的，看实例用第一种方法更多一些。

但利用jQuery获得内容时可获得三种内容，分别是 text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

实例

$("#btn1").click(function(){alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){alert("HTML: " + $("#test").html());
});

现在第一种方法content: $("#importBox").html()很明显就是获得html内容，而formData则是和json一样的一种数据对象。这样显示当然没有问题，但生成formData对象显然不行，那么把.html()去掉，则变成 jQuery 类选择器的用法，是否能够可行呢？
于是把content内容从$("#importBox").html()，变成$("#importBox")，再次测试，居然成功！看来，问题就在.html()上，不在于是用 jQuery 类选择器还是用 jQuery 方法。
这样的坑，希望其他朋友们以后避免！