一、
***背景是有一个form表单,里面有input file 标签,想要ajax提交***
$(document).on('click','$sub',function(){
var url = $(this).attr('url);//将url地址接过来
var form = new FormData();//创建form对象
var data=$('form').serializeArray();//序列化表单数据
$.each(data,function(){
form.append(this.name,this.value);//将表单数据追加进form对象中
})
form.append('brand_logo',$('#brand_logos')[0].files[0]);//将图片数据追加进对象
$.ajax({
type:'post',
url:url,
data:form,
dataType:'json',
contentType:false,
processData:false,//这两个false必须设
****提交完成之后,后台接数据打印数据自行进行入库操作****
success:function(msg){
//判断图片上传是否成功并给出提示
location.href=msg.url;
}
})
})
二、
***背景是展示列表中要做一个图片即点即改的操作***
html代码
<td>
<img src="<?php echo base_url($v['brand_logo'])?>" class="edit-img" width=60 name='img'>
<input type="file" style="display:none;" class="edit-file">
</td>
<img src="<?php echo base_url($v['brand_logo'])?>" class="edit-img" width=60 name='img'>
<input type="file" style="display:none;" class="edit-file">
</td>
js代码
//图片即点即改
$('.table').on('click','.edit-img',function(){
var obj=$(this);
obj.next().trigger('click'); //给input file 标签追加click事件
})
$('.table').on('change','.edit-file',function(){//当input file 标签改变事件后
var obj=$(this);
var id=obj.parents('tr').data('id');//获取本条数据id
var form=new FormData();
form.append('id',id);
form.append('img',obj[0].files[0]);//同上
$.ajax({
type:'post',
url:"<?php echo site_url('Brand/setBrandLogo')?>",
data:form,
dataType:'json',
cache:false,
contentType:false,
processData:false,
$('.table').on('click','.edit-img',function(){
var obj=$(this);
obj.next().trigger('click'); //给input file 标签追加click事件
})
$('.table').on('change','.edit-file',function(){//当input file 标签改变事件后
var obj=$(this);
var id=obj.parents('tr').data('id');//获取本条数据id
var form=new FormData();
form.append('id',id);
form.append('img',obj[0].files[0]);//同上
$.ajax({
type:'post',
url:"<?php echo site_url('Brand/setBrandLogo')?>",
data:form,
dataType:'json',
cache:false,
contentType:false,
processData:false,
***后台接到数据进行修改操作***
success:function(msg){
//修改成功后将图片路径传回来,并替换到img标签的src属性中
obj.prev().attr('src',msg.data);
}
})
})
//修改成功后将图片路径传回来,并替换到img标签的src属性中
obj.prev().attr('src',msg.data);
}
})
})
希望对大家有所帮助!!!