前端使用formData,后端使用php，实现表单提交和文件上传

需求：实现用户表单提交，并能获取到用户上传的文件。

##前端html文件中, 
##enctype这个参数，网上有的说要填，有的又说因为formData中有添加文本（比如下面的jigoujies）字段，所以不用填，没有填是可以正常使用的。
##还有要注意的是：form标签内不能使用button标签，只能用  <input type="button" value="login"/>做为按钮，否则会造成表单自动刷新。
<form id="myform" action="填写提交给后端php文件的路径" method="post"  class="formBox" enctype="multipart/form-data">
    <p><label for="">机构介绍:</label>
        <input type="text" id="jigoujies">
    </p>
    <p><label for=""></label>
       <input type="file" name="file1" id="jigoujiesfile">
    </p>
    <p><label for="">师资介绍:</label>
       <input type="text" id="shizjies">
    </p>
     <p><label for=""></label>
        <input type="file" name="file2" id="shizjiesfile">
     </p>
     <p class="btnBox">
          <input type="button" id="submit" value="提交"/>
     </p>
</form>

##前端js文件
$('#myform').on('click','#submit',function(){
     
      var jigoujies=$('#jigoujies').val();//机构介绍
      var jigoujiesfile=$('#jigoujiesfile')[0].files[0];//机构介绍文件
      var shizjies=$('#shizjies').val();//师资介绍
      var shizjiesfile=$('#shizjiesfile')[0].files[0];//师资介绍文件
      var formData = new FormData(); //新建一个formData对象
      formData.append("file1",jigoujiesfile); //append()方法添加字段
      formData.append("file2",shizjiesfile); //append()方法添加字段 
      formData.append("jigoujies",jigoujies);//添加一个文本字段
      formData.append("shizjies",shizjies);//添加一个文本字段
        $.ajax({
       url:'填写提交给后端php文件的路径',
                  type:'post',
                  data:formData,//发给后端的formData
                  processData:false,//必填 必须false 才会避开jq对formdata的默认处理 XMLHttpRequest才会对formdata进行正确处理  否则会报Illegal invocation错误
                  contentType:false,//必填 必须false 才会加上正确的Content-Type
                  success:function(res) {
     }
       })
})

##后端php文件
##主要就是一个接受数据
$file1=$_FILES["file1"];//文件一详情
$file2=$_FILES["file2"];//文件二详情
$jigoujies=$_POST["jigoujies"];//其他文本框内容
$shizjies=$_POST["shizjies"];//其他文本框内容
echo $jigouData;//可以打印出来看一下
echo $huiyData;
print_r($file1);//数组使用print_r打印
print_r($file2);
##move_uploaded_file 的作用，将临时存储的文件存到想要存的路径，默认是和这php文件在同一级，我是在此文件夹下建了一个子文件夹用来放上传的文件。
move_uploaded_file($file1['tmp_name'],"C:/wamp64/www/h5/lib/souce/".$file1["name"]); 
move_uploaded_file($file2['tmp_name'],"C:/wamp64/www/h5/lib/souce/".$file2["name"]); 
   

注意事项笔记

1. form中不能使用button标签。
2. 使用move_uploaded_file时最好把保存位置的绝对路径写上。
3. 前端用户上传文件时，文件名不能为中文，为中文上传不了，这是个没解决的问题。
4. 保存文件的目录名（“C:/wamp64/www/h5/lib/souce/”）也不能为中文。
5. 上传文件还有大小限制，超过大小php就崩了，暂时没找到怎么改。上传的文件太大会报 Notice: Undefined index: file2 in
6. 清空apped这元素下的子元素：$(’.apped’).empty();

我没有遇到但看别人遇到过的问题记录

1. php.ini 配置问题
2. 存放文件的文件夹权限问题