在常見(jiàn)的用戶注冊(cè)頁(yè)面，需要用戶在本地選擇一張圖片作為頭像，并同時(shí)預(yù)覽。
常見(jiàn)的思路有兩種：一是將圖片上傳至服務(wù)器的臨時(shí)文件夾中，并返回該圖片的url，然后渲染在html頁(yè)面；另一種思路是，直接在本地內(nèi)存中預(yù)覽圖片，用戶確認(rèn)提交后再上傳至服務(wù)器保存。
這兩種方法各有利弊，方法一很明顯，浪費(fèi)流量和服務(wù)器資源；方法二則加重了瀏覽器的負(fù)擔(dān)，并且對(duì)瀏覽器的兼容性要求更高（在某些低版本中的IE瀏覽器不支持）。
以下是實(shí)現(xiàn)上述思路的方法：
1. 模板文件
test.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div > <form action=""> {% csrf_token %} <h3>用戶注冊(cè)</h3> <p>用戶名：<input type="text" name="userName"></p> <p>密碼：<input type="password" name="password"></p> <p>郵箱：<input type="text" name="email"></p> <input id="avatar" type="text" value="/static/images/sample.png" name="avatar" > {# 實(shí)際應(yīng)用中要將該input標(biāo)簽隱藏，display:none; #} <p><input type="submit" value="注冊(cè)"></p> </form> <div > <input id="avatarSlect" type="file" > <img id="avatarPreview" src="/static/images/sample.png" title="點(diǎn)擊更換圖片" > </div> </div></body><script src="/static/jquery-3.2.1.js"></script><script> $(function () { bindAvatar(); }); function bindAvatar() { if(window.URL.createObjectURL){ bindAvatar3(); }else if(window.FileReader){ bindAvatar2(); }else { bindAvatar1(); } } /*Ajax上傳至后臺(tái)并返回圖片的url*/ function bindAvatar1() { $("#avatarSlect").change(function () { var csrf = $("input[name='csrfmiddlewaretoken']").val(); var formData=new FormData(); formData.append("csrfmiddlewaretoken",csrf); formData.append('avatar', $("#avatarSlect")[0].files[0]); /*獲取上傳的圖片對(duì)象*/ $.ajax({ url: '/upload_avatar/', type: 'POST', data: formData, contentType: false, processData: false, success: function (args) { console.log(args); /*服務(wù)器端的圖片地址*/ $("#avatarPreview").attr('src','/'+args); /*預(yù)覽圖片*/ $("#avatar").val('/'+args); /*將服務(wù)端的圖片url賦值給form表單的隱藏input標(biāo)簽*/ } }) }) } /*window.FileReader本地預(yù)覽*/ function bindAvatar2() { console.log(2); $("#avatarSlect").change(function () { var obj=$("#avatarSlect")[0].files[0]; var fr=new FileReader(); fr.onload=function () { $("#avatarPreview").attr('src',this.result); console.log(this.result); $("#avatar").val(this.result); }; fr.readAsDataURL(obj); }) } /*window.URL.createObjectURL本地預(yù)覽*/ function bindAvatar3() { console.log(3); $("#avatarSlect").change(function () { var obj=$("#avatarSlect")[0].files[0]; var wuc=window.URL.createObjectURL(obj); $("#avatarPreview").attr('src',wuc); $("#avatar").val(wuc);{# $("#avatarUrl").load(function () {#} /*當(dāng)圖片加載后釋放內(nèi)存空間，但在jQuery3.2.1中會(huì)報(bào)錯(cuò)。瀏覽器關(guān)閉后也會(huì)自動(dòng)釋放*/{# window.URL.revokeObjectURL(wuc);#}{# })#} }) }</script></html>
新聞熱點(diǎn)
疑難解答
圖片精選
