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

来源:互联网 发布:炒外汇模拟软件 编辑:程序博客网 时间:2024/06/05 18:58

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

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

          点击button 触发隐藏的 input上传


view层

<img id='headimage' src="images/default_tx.jpeg" width="80" height="80" style="border-radius: 5px;" /><div style="width: 100%; height: auto; text-align: center; margin-top: 10px;">      <input type="button" class="btn btn-default btn-sm" value="上传头像" onclick="getElementById('inputfile').click()" /> <form id="submit_form11" method="post" action="index.php?r=cus-main/upimage" target="exec_target" enctype="multipart/form-data"> <input type="file" name="image" style="display:none;" id="inputfile"/></div> </form>

$("#inputfile").change(function(){     var data = new FormData();        $.each($('#inputfile')[0].files, function(i, file) {        data.append('image', file);  //可以使用append方法 可以人为的给当前formdata对象添加键/值对    });        data.append('cid',<?php echo $info['cid']; ?>)    $.ajax({        url:"index.php?r=cus-main/upimage",        type:'POST',        data:data,        cache: false,        contentType: false,   //告诉jquery不去处理发送的数据        processData: false, //告诉jquery不去设置content-type请求头        success:function(data){            if(data['code']==101)            {            $('#headimage').attr('src',data['url']);            }else            {                alert('系统繁忙');            }        },        error:function(){        
         alert('系统繁忙')
} });})


后台获取

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

0 0