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 方法。
这样的坑，希望其他朋友们以后避免！