欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交

 更新時(shí)間：2020年12月25日 11:26:49   作者：harold1024  
這篇文章主要介紹了js如何實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交，幫助大家更好的理解和使用js，感興趣的朋友可以了解下

在用戶注冊(cè)賬號(hào)或者修改資料的時(shí)候會(huì)需要用戶在本地選擇一張圖片作為頭像，并同時(shí)預(yù)覽，

常見(jiàn)的思路有兩種：一是將圖片上傳至服務(wù)器的臨時(shí)文件夾中，并返回該圖片的url，然后渲染在html頁(yè)面；另一種思路是，直接在本地內(nèi)存中預(yù)覽圖片，用戶確認(rèn)提交后再上傳至服務(wù)器保存。

這兩種方法各有利弊，方法一很明顯，浪費(fèi)流量和服務(wù)器資源；方法二則加重了瀏覽器的負(fù)擔(dān)，并且對(duì)瀏覽器的兼容性要求更高。

這里介紹的是直接在本地內(nèi)存中預(yù)覽圖片，用戶確認(rèn)提交后再上傳至服務(wù)器保存這種方法

html

<div class="reHead">
   <P class="content-format">頭像支持jpg、png、jpeg格式，文件大小最大不能超過(guò)1M</P>
   <div class="content">
     <form method="post" enctype="multipart/form-data" id="file_upload" class="headForm">
       <div id="test-image-preview" class="iconfont icon-bianjitouxiang">
         <input type="file" name="test" id="test-image-file" class="fileHead" accept="image/gif, image/jpeg, image/png, image/jpg" multiple="multiple">
       </div>
       <div class="headMain">
         <span class="file">上傳文件</span>
         <p id="test-file-info" class="fileName"></p>
       </div>
     </form>
   </div>
   <div class="but">
     <button class=" orangeHead" id="upImgSub"><a href="" title=" rel="external nofollow" 編輯資料" target="_blank">保存</a></button>
   </div>
 </div>

js 上傳頭像

<script type="text/javascript" src="./jquery.min.js"></script>
  <script>
    var fileInput = document.getElementById('test-image-file'),
      info = document.getElementById('test-file-info'),
      preview = document.getElementById('test-image-preview');
      dataBase64 = '',
    // preview.style.backgroundImage = 'url(../../img/portrait.png)';  //默認(rèn)顯示的圖片

    // 監(jiān)聽(tīng)change事件:
    fileInput.addEventListener('change', upImg);

    // 頭像上傳邏輯函數(shù)
    function upImg(){
      preview.style.backgroundImage = '';    // 清除背景圖片
      if (!fileInput.value) {   // 檢查文件是否選擇:
        $('#test-image-preview').addClass('icon-bianjitouxiang');
        info.innerHTML = '沒(méi)有選擇文件';
      }else{
        $('#test-image-preview').removeClass('icon-bianjitouxiang');
        info.innerHTML = '';
      }
      
      var file = fileInput.files[0];  // 獲取File引用
      var size = file.size;
      if (size >= 1 * 1024 * 1024) {   //判斷文件大小
        info.innerHTML = '文件大于1兆不行!';
        preview.style.backgroundImage = '';
        $('#test-image-preview').addClass('icon-bianjitouxiang');
        return false;
      }
      
      if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {  // 獲取File信息:
        info.innerHTML = '不是有效的圖片文件!';
        preview.style.backgroundImage = '';
        $('#test-image-preview').addClass('icon-bianjitouxiang');
        return;
      }

      // 讀取文件:
      var reader = new FileReader();
      reader.onload = function (e) {
        dataBase64 = e.target.result;   // 'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...}'    
        preview.style.backgroundImage = 'url(' + dataBase64 + ') ';
        preview.style.backgroundRepeat = 'no-repeat';
        preview.style.backgroundSize = ' 100% 100%';
      };
      // 以DataURL的形式讀取文件:
      reader.readAsDataURL(file);
      // console.log(file);
    }

js 提交頭像到服務(wù)器

$("#upImgSub").click(function () {
      $.ajax({
        type:'post',
        data:{'newHead':dataBase64},
        async:false,   // 當(dāng)async屬性的值為false時(shí)是同步的，Ajax請(qǐng)求將整個(gè)瀏覽器鎖死，只有ajax請(qǐng)求返回結(jié)果后，才執(zhí)行ajax后面的alert語(yǔ)句。  (雖然可行,但是不推薦)              // 當(dāng)async屬性的值為true時(shí)是異步的，即不會(huì)等待ajax請(qǐng)求返回的結(jié)果，會(huì)直接執(zhí)行ajax后面的alert語(yǔ)句。    (后期介紹異步請(qǐng)求解決回地獄)
        dataType:'json',
        url:'/index/img',
        success:function (res) {  // 返回成功
          if(res.code === 200){
            alert(msg)     // 上傳成功
          }else{
            alert(msg)     // 上傳失敗
          }
        },
        error:function () {
          alert("接口錯(cuò)誤");    // 返回失敗
        }
      })
    });

當(dāng)async屬性的值為false時(shí)是同步的，Ajax請(qǐng)求將整個(gè)瀏覽器鎖死，只有ajax請(qǐng)求返回結(jié)果后，才執(zhí)行ajax后面的alert語(yǔ)句。 (雖然可行,但是不推薦) 當(dāng)async屬性的值為true時(shí)是異步的，即不會(huì)等待ajax請(qǐng)求返回的結(jié)果，會(huì)直接執(zhí)行ajax后面的alert語(yǔ)句。 (后期介紹異步請(qǐng)求解決回地獄)

css

body{
  font-size: 12px;
}
.reHead{
  margin: 15px 4%; 
}
.headForm{
  text-align: center;
  padding: 40px 0 70px 0;
}
#test-image-preview {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: #F5F5F5;
  color: #fff;
  font-size: 60px;
  text-align: center;
  line-height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 26px;
}
.fileHead{
  position: absolute;
  width: 100px;
  height: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}
.content-format {
  font-size: 12px;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.headMain{
  height: 40px;
}
.file {
  position: relative;
  background: #fff;
  color: #F39800;
  font-weight:800;
}
.file input {
  position: absolute;
  font-size: 12px;
  right: 0;
  top: 0;
  opacity: 0;
}
.fileName {
  line-height: 28px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.but{
  text-align: center;
}
.orangeHead{
  width: 40%;
  height: 40px;
  background: #f60;
  border: none;
}
.orangeHead a{
  color: #fff;
}

以上就是js實(shí)現(xiàn)頭像上傳并且可預(yù)覽提交的詳細(xì)內(nèi)容，更多關(guān)于js 頭像上傳的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論