对于图片的即点即改

对于图片的即点即改

html代码

<img src="/uploads/{{$v->img}}" alt="" width="70" height="50" class="img" />
<input type="file" style="display:none" data-id='{{$v->id}}' class="file">

script代码

         $(document).on('click','.img',function(){
            $(this).next().trigger('click');
           })
        //文件域发生改变触发事件
        $(document).on('change','.file',function(){
            // 想办法吧图片文件传到后台
            // 申明一个表单对象
            var form=new FormData();
            console.log(form)
            var file=$(this);
            var id=file.data('id');
            form.append('img',file[0].files[0]);
            form.append('id',id);
            console.log(form)
            //发送ajax
            $.ajax({
              type:'POST',
              url:"/admin/ajaxfile",
              data:form,
              cache:false,
              contentType:false,
              processData:false,
              success:function(e)
              {
                if(e == 0)
                {
                  alert('图片修改失败');
                  return false;
                }
                else
                {
                  file.prev().prop('src','/uploads/'+e);
                }
              }
            })
        })

---

后台php代码需自己完成，接受数据、修改数据库值