Ajax 使用formdata 实现 无刷新表单上传

FormData对象的作用就类似于这里的serialize()方法，不过FormData是浏览器原生的，且支持二进制文件

1.这里实现一个无刷新上传图片，成功后页面显示

点击button 触发隐藏的 input上传

view层

<img id='headimage' src="data:images/default_tx.jpeg" width="80" height="80" style="border-radius: 5px;" />
<div style="width: 100%; height: auto; text-align: center; margin-top: 10px;">
<span style="font-family:Arial;"> </span>
 
<input type="button" class="btn btn-default btn-sm" value="上传头像" onclick="getElementById('inputfile').click()" />
<form id="submit_form11">
<input type="file" name="image" style="display:none;" id="inputfile"/></div>
</form>

JS

　　formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。

//1.可以通过form表单获取
var form = $("#submit_form11")[0];
var form = document.getElementById("submit_form11");
//两种写法相同，获取表单对象节点
var data = new FormData(form);
//表单来初始化
 
//2.可以直接获取对象存入formdata
var data = new FormData();
//$.each($('#inputfile')[0].files, function(i, file) {
//data.append('image', file);
//});
data.append("image" , $("#inputfile")[0].files[0]);
//这种方法就不用使用form标签了
 
// var image = formData.get("image");
//formdata提供get方法可以获取存入的值
data.append('cid',<?php echo $info['cid']; ?>)
// 当然也可以在此基础上，添加其他数据
 
//上传
$.ajax({
        url:"index.php?r=cus-main/upimage",
        type:'POST',
        data:data,
        cache: false,
        contentType: false,   // 不处理发送的数据，因为data值是Formdata对象，必须false才会自动加上正确的Content-Type
        processData: false, // 必须false才会避开jQuery对 formdata 的默认处理，XMLHttpRequest会对 formdata 进行正确的处理
        success:function(data){
            if(data['code']==101)
            {
            	$('#headimage').attr('src',data['url']);
            	$('#tips').css('display','none');
            }else
            {
                alert('图片上传失败');
            }
 
        },
        error:function(){
            alert('图片上传失败');)
        }
    });

　　

　　后台处理

获取文件图片 使用 $_FILES['image']  获取一般键值 使用$_POST['cid']