目錄

1. 頭像上傳的前端處理

2. 頭像上傳的后端處理

3. ajax打包form里面的數(shù)據(jù)

1. 頭像上傳的前端處理

• 需求: 效果圖在最下面

  打開注冊(cè)頁面時(shí), 顯示默認(rèn)頭像 , 點(diǎn)擊頭像進(jìn)行文件選擇 ,選擇完成將默認(rèn)頭像改為選擇的頭像

• 代碼:

  html部分: 將label的for值設(shè)為input的id , 并將img控件放入label中, 這樣實(shí)現(xiàn)了點(diǎn)擊頭像就可以選擇文件了, 因?yàn)閒ile的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部分將這個(gè)input框display改成none

js部分, 要讓選完圖片以后img改成你選擇的圖片

  // 對(duì)input框的值進(jìn)行監(jiān)聽
  $("#my_file").change(function () {
      
          //先取出文件(圖片)
          var file_obj = $("#my_file")[0].files[0];
      
          //通過文件閱讀器,把圖片放到img標(biāo)簽上
          //生成一個(gè)文件閱讀器對(duì)象
          var filereader = new FileReader()
          
          //把圖片對(duì)象,讀到filereader對(duì)象中
          filereader.readAsDataURL(file_obj)
      
          //filereader.result 這是filereader對(duì)象的值
          //把文件對(duì)象渲染到img標(biāo)簽上(這樣不行.需要加載完成才能操作)
          //$("#img_file").attr('src', filereader.result)
  
          //等加載完成,再操作
          filereader.onload=function () {
              $("#img_file").attr('src', filereader.result)
          }
  
  
      })

2. 頭像上傳的后端處理

• 視圖函數(shù)里取頭像參考

  http://www.itdecent.cn/p/0f9c3a2e46ea

 存到數(shù)據(jù)庫(kù)的方法與其他東西一樣
 取出上傳的文件對(duì)象
 my_file=request.FILES.get('my_file')
 存入數(shù)據(jù)庫(kù)
 models.UserInfo.objects.create_user(avatar=my_file)

• 注意

  1. 因?yàn)槲以诮〝?shù)據(jù)庫(kù)時(shí)設(shè)置了頭像的默認(rèn)值, 所以從request里面取出來的文件對(duì)象需要對(duì)其進(jìn)行判斷, 若存在則存, 不存在就用默認(rèn)的

  2. 數(shù)據(jù)庫(kù)里面的頭像字段

     avatar = models.FileField(upload_to='avatar/', default='/static/img/default.png')
     
     第一個(gè)參數(shù)是文件存放的路徑,沒有會(huì)新建的
     第二個(gè)參數(shù)是默認(rèn)頭像的路徑
     

  3. 存在數(shù)據(jù)庫(kù)里的并不是文件的二進(jìn)制, 而是文件的路徑, 取的時(shí)候取到對(duì)應(yīng)的路徑再去加載

     原因 : 如果圖片都存到數(shù)據(jù)庫(kù), 因?yàn)閳D片是比較大的, 數(shù)據(jù)庫(kù)壓力會(huì)很大

     有了models.FileField字段,存文件,以及往數(shù)據(jù)庫(kù)放文件路徑,統(tǒng)統(tǒng)不需要自己做了
     只需要把文件對(duì)象賦給它就可以了

3. ajax打包form里面的數(shù)據(jù)

• 需求:

  當(dāng)數(shù)據(jù)很多時(shí), 有好多好多input框, 再一個(gè)一個(gè)的去拼數(shù)據(jù)很麻煩, 而且如果與文件的話, 還要一個(gè)一個(gè)去append, 更麻煩

• 用法

  給form取個(gè)id , 用jq找到這個(gè)控件后點(diǎn).serializeArray()把form表單打包,轉(zhuǎn)成對(duì)象(列表套字典)

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

  //因?yàn)橐蟼魑募?生成formdata對(duì)象
  var formdata=new FormData()
  
  var arr=$("#form").serializeArray()
  
  //jquery 的循環(huán),傳參數(shù):第一個(gè)參數(shù)是要循環(huán)的對(duì)象,第二個(gè)參數(shù)是一個(gè)匿名函數(shù)
  $.each(arr,function (key,obj) {
      //key為索引,obj為每次循環(huán)的元素
      //obj對(duì)應(yīng)的是:{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)
      }
  })
  

  后臺(tái)接收到的還與以前一樣, 通過request.POST與request.FILES接收
  .
  .
  .
  .

選擇頭像以前

.
.

選擇頭像以后,