ajax上传图片及图片即点即改

一、

***背景是有一个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>

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,

***后台接到数据进行修改操作***

          success:function(msg){
              //修改成功后将图片路径传回来，并替换到img标签的src属性中
              obj.prev().attr('src',msg.data);
          }
    })
 })

希望对大家有所帮助！！！