jquery使用ajax异步上传文件

利用formdata对象可以实现文件的异步上传

html代码（注意表单的enctype属性必须是multipart/form-data）

<form id="form1" enctype="multipart/form-data">
    <input type="text" name="name">
    <input type="text" name="pwd">
    <input type="text" name="cid">
    <input id="file" type="file" name="file">

     <input id="btn" type="button" value="保存">
</form>

js代码

$("#btn").on("click", function(){
        //注意，formData是表单中的对象，$("#form1")[0]是DOM表单对象而不是input对象
        var formData = new FormData($("#form1")[0]);
        //往formData插入普通的表单数据以便与文件一起提交到服务器
        var data=$('form').serializeArray();
        $.each(data,function(index,item){
            formData.append(item.name,item.value);
        });
        $.ajax({
            url: '__URL__/test1',//数据提交的目标文件
            type: 'POST',
            data: formData, // 上传formdata封装的数据
            dataType: 'JSON',
            cache: false,                      // 不缓存
            processData: false,                // jQuery不要去处理发送的数据
            contentType: false,                // jQuery不要去设置Content-Type请求头
            success:function (data) {           //成功回调
                console.log(data);
            }
        });
    });

注意：

1.创建FormData对象时传入的参数必须是表单对象！并且必须是DOM对象不能时iQuery对象

2.完成上述步骤后就可以在后台验证$_FILES['file']是否存在（php语言），如果存在说明文件上传正确，不存在说明意不提交文件不成功。

3.FormData可以插入普通的表单数据与文件一并提交，但是$_POST中只可以找到普通的保单数据，文件的信息在$_FILES['提交时的name属性']中

php代码(ThinkPHP3.2的控制器代码)

public function test1(){
        $data=I('post.');
//        $this->ajaxReturn($_FILES['file']);//用于测试前端数据是否上传成功
        if(IS_POST){
            if($_FILES['file']['error']==0){
                $config=array(
                    'rootPath'=>'./Application/public/uploads/'//配置文件上传的路径
                );
                $upload=new \Think\Upload($config);//创建upload对象
                $info=$upload->uploadOne($_FILES['file']);
                $this->ajaxReturn($info);
            }
        }

    }

jquery使用ajax异步上传文件

猜你喜欢