ajax无刷新表单信息提交

1. 收集表单信息

利用新技术FormData表单数据对象可以实现快速收集表单信息。

FormData是html5的新技术，在主流浏览器都可以正常使用。

    
    
    
    


    
ajax + javascript + form 实现无刷新表单信息提交
    

        
用户名：
        
密码：
        
邮箱：
        

    

效果图：

2、ajax实现文件上传

服务器端：$_FILES接收附件信息(name/error/size/type/tmp_name)

move_uploaded_file(临时附件，真实附件路径名);

 

$_FILES   中的error字段意思

0->ok

1->大小超过php.ini限制

2->大小超过MAX_FILE_SIZE

3->附件只上传了一部分（不完整）

4->没有上传附件

    
    
    
    


    
ajax + javascript + formData 实现无刷新文件上传
    
        
用户名：
        
密码：
        
邮箱：
        
头像：
        

    

 0){
    exit('上传附件有问题，有可能没有附件');
}
$path = "./upload/";
$name = $_FILES['img']['name'];
//附件上传逻辑
if(move_uploaded_file($_FILES['img']['tmp_name'], $path.$name)){
    echo 'success';
} else {
    echo 'fail';
}

效果图：

2.1 使用FormData注意：

① 每个表单域必须有name属性

② 在form标签里边无需设置enctype=”multipart/form-data”属性(即时有上传域)

③ ajax传递FormData的数据不需要设置setRequestHeader()函数

3. 上传大附件进度条设置

接收php代码

 0){
    exit('上传附件有问题，有可能没有附件');
}
$name = $_FILES['img']['name'];
$name = iconv('UTF-8', 'GB2312', $name);
$path = "./upload/";

//附件上传逻辑
if(move_uploaded_file($_FILES['img']['tmp_name'], $path.$name)){
    echo 'success';
} else {
    echo 'fail';
}

显示代码：

    
    
    
    


    
ajax + javascript + formData 实现无刷新文件上传
    

        
用户名：
        
密码：
        
邮箱：
        

        
头像：
        

    

效果图：