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

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

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

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

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

<script type='text/javascript' src='http://www.piao2010.com/bcjs/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)求解決回地獄)

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)注好吧啦網(wǎng)其它相關(guān)文章！