正文

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

IP云
IP云V管理员/0 阅读
12/02
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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']

相关阅读

目录[+]