ajax上传文件到php的代码教程

作为一个开发人员，踩坑是必要的，不踩坑是不长进的。今天我们就来谈谈ajax上传文件时可能遇到的几个大坑。

html 文件：

</p>
<input type="file" id="fileloader"  name="file" />
<button  id="fileuploader">开始上传</button>
</p>

需要添加的js文件jquery-2.1.4.min.js，

自定义的ajax代码片段，

$(function(){
    $('#fileuploader').click(function () {
    //获取上传文件的相关信息，得到的数据是数组格式
        var fileArray = document.getElementById('fileloader').files;
        var formData = new FormData();
       for(var i=0; i
上面的代码是ajax向服务器传递文件的方法，其中需要特别注意： 

1.async:false,  

false为同步，这个Ajax请求将整个浏览器锁死，只有upLoad_File方法执行结束后，才可以执行其它操作。 

2.async: true， 

 true是异步的，这个ajax请求和其后面的操作是异步执行的，那么当upLoad_File方法还未执行完，就可能已经执行了 ajax请求后面的操作，如：alert(responseStr.info);然而，info这个数据是在ajax请求success后才赋值的，结果，输出时会为空。
当然还有另一种方式来达到和同步的同种效果，那就是在函数体末尾加 return false;来防止函数的继续调用。
服务器接收文件 

 我用的是php语言和thinkphp框架,编写的接收方法如下
 public function upLoad_File(){
         //文件保存路径
         $output_dir = APP_PATH."/../upload/";
         //获取上传文件名
         $fileName=$_FILES['fileArray']['name'];
         //获取上传文件
         $file=$_FILES['fileArray'];
         if (!isset($file)){
                $this->ajaxReturn(array(
                    'msg'=>0,
                    "info"=>"文件上传失败!",
                ));
            }else{
//上传文件
          if(!@move_uploaded_file($file['tmp_name'],$output_dir.$fileName)){
                        $this->ajaxReturn(array(
                            'msg'=>0,
                            "info"=>"文件上传失败!",
                        ));
                    } ;
                    $this->ajaxReturn(array(
                        'msg'=>1,
                        "info"=>"文件上传成功！!",
                    ));
                   // return $fileName;

        }
     }
服务端接收文件需要注意的地方是$_FILES[‘fileArray’]，它就是ajax传过来的formData.append(“fileArray”, fileArray[i])数据。