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="上传头像" οnclick="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'];