图片上传与ajax打包form里面的数据

目录

1. 头像上传的前端处理

2. 头像上传的后端处理

3. ajax打包form里面的数据

1. 头像上传的前端处理

• 需求: 效果图在最下面

  打开注册页面时, 显示默认头像 , 点击头像进行文件选择 ,选择完成将默认头像改为选择的头像

• 代码:

  html部分: 将label的for值设为input的id , 并将img控件放入label中, 这样实现了点击头像就可以选择文件了, 因为file的input框太丑了

  <div class="form-group">
      <label for="my_file">头像
          <img src="/static/img/default.png" id="img_file" alt="" width="80" height="80"
          style="margin-left: 10px">
      </label>
  
      <input type="file" id="my_file">
  </div>
  

css部分将这个input框display改成none

js部分, 要让选完图片以后img改成你选择的图片

  // 对input框的值进行监听
  $("#my_file").change(function () {
      
          //先取出文件(图片)
          var file_obj = $("#my_file")[0].files[0];
      
          //通过文件阅读器,把图片放到img标签上
          //生成一个文件阅读器对象
          var filereader = new FileReader()
          
          //把图片对象,读到filereader对象中
          filereader.readAsDataURL(file_obj)
      
          //filereader.result 这是filereader对象的值
          //把文件对象渲染到img标签上(这样不行.需要加载完成才能操作)
          //$("#img_file").attr('src', filereader.result)
  
          //等加载完成,再操作
          filereader.onload=function () {
              $("#img_file").attr('src', filereader.result)
          }
  
  
      })

2. 头像上传的后端处理

• 视图函数里取头像参考

  https://www.jianshu.com/p/0f9c3a2e46ea

 存到数据库的方法与其他东西一样
 取出上传的文件对象
 my_file=request.FILES.get('my_file')
 存入数据库
 models.UserInfo.objects.create_user(avatar=my_file)

• 注意

  1. 因为我在建数据库时设置了头像的默认值, 所以从request里面取出来的文件对象需要对其进行判断, 若存在则存, 不存在就用默认的

  2. 数据库里面的头像字段

     avatar = models.FileField(upload_to='avatar/', default='/static/img/default.png')
     
     第一个参数是文件存放的路径,没有会新建的
     第二个参数是默认头像的路径
     

  3. 存在数据库里的并不是文件的二进制, 而是文件的路径, 取的时候取到对应的路径再去加载

     原因 : 如果图片都存到数据库, 因为图片是比较大的, 数据库压力会很大

     有了models.FileField字段,存文件,以及往数据库放文件路径,统统不需要自己做了
     只需要把文件对象赋给它就可以了

3. ajax打包form里面的数据

• 需求:

  当数据很多时, 有好多好多input框, 再一个一个的去拼数据很麻烦, 而且如果与文件的话, 还要一个一个去append, 更麻烦

• 用法

  给form取个id , 用jq找到这个控件后点.serializeArray()把form表单打包,转成对象(列表套字典)

  如[ {name:'name',value:'wzj'},{name:'password',value:'123'}...]

  //因为要上传文件,生成formdata对象
  var formdata=new FormData()
  
  var arr=$("#form").serializeArray()
  
  //jquery 的循环,传参数:第一个参数是要循环的对象,第二个参数是一个匿名函数
  $.each(arr,function (key,obj) {
      //key为索引,obj为每次循环的元素
      //obj对应的是:{name: "name", value: "sfdae"}
      formdata.append(obj.name,obj.value)
  })
  
  //把文件放到formdata中
  formdata.append('my_file',$('#my_file')[0].files[0])
  
  $.ajax({
      url:'/register/',
      type:'post',
      processData:false,
      contentType:false,
      data:formdata,
      success:function (data) {
        console.log(data)
      }
  })
  

  后台接收到的还与以前一样, 通过request.POST与request.FILES接收
  .
  .
  .
  .

选择头像以前

.
.

选择头像以后,