HTML5實現頭像的上傳

TML5實現頭像的上傳

這是利用form-data給后臺傳輸數據，來實現頭像的上傳加載！

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
<body>
    <div class="container">
        <input enctype="multipart/form-data" type="file">
        <input id="Susername"  type="text" placeholder="用戶名">
        <input id="Ssex" type="number" placeholder="年齡">
        <input id="Sage" type="text" placeholder="專業">
        <input id="Smajor" type="text" placeholder="學校">
        <input id="Sschool" type="text" placeholder="QQ">
        <input id="Sqq" type="text" placeholder="地址">
        <input id="Saddress" type="text" placeholder="座右銘">
        <input id="Smotto" type="button" value="上傳">
       
        <div style="clear: both;"></div>
             <progress value="0" max="100"></progress>
    </div>
    <div class="showarea">
        <h3>顯示區域</h3>
    </div>
    </body>
</html>

樣式代碼

 .container{
            box-sizing: border-box;
            width: 404px;
            height: 100px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding-top: 20px;
            background: linear-gradient(to bottom,#0ff,#0ff 20px,transparent 0);
            margin: 0 auto;
        }
        input{
            padding: 0;
            margin: 0;
          
        }
        .container input[type=file]{
            width: 300px;
            height: 30px;
            border: 1px solid #ccc;
            background: #7FFFD4;
            color: #133131;
            float: left;
        }
        .container input[typr=button]{
            width: 100px;
            height: 32px;
            float: left;
            border: 1px solid #ccc;
            color:  #133131;
        }
        progress{
            display: none;
            width: 400px;
            height: 30px;
            margin-top: 7px;
        }
        .showarea{
            width: 600px;
            min-height: 200px;
            border: 1px solid #ccc;
            margin: 30px auto;
        }
        .showarea h3{
            widows: 100px;
            margin: 0 auto;
            line-height: 60px;
            text-align: center;
            border-bottom: 1px solid #cccc;
            color: #133131;
            
        }
        .showareaimg{
            max-width: 1000%;
        }

javescript代碼

上有很多的理由cropper.js開發的h5圖片上傳，但是大都依賴bootstrap，需要引入他們的東西，感覺太重。另外由于phpcms v9后臺修改flash上傳為h5上傳，唯獨沒有修改頭像的上傳，感覺不太完美，所以專門開發了一下h5頭像上傳，

具體修改方案參考：https://doc.tengcee.com/other/148.html，代碼修改極少，php代碼總共修改了5行，幫你快速搞定頭像H5上傳

目前是對接sso的上傳，可以完美實現sso式保存頭像

（此處已添加小程序，請到客戶端查看）

O.KM220112 -虎年頭像生成

文章編輯：945KM 適用系統：WEB

頭像！頭像！該換頭像了！！

01應用介紹

這是一個可以生成帶“虎元素”的在線頭像生成器，含25款虎年頭像。

使用方法：打開網頁—上傳頭像—選擇喜歡的頭像框（頭像框通過拖拽可調整）—點擊“保存頭像”—手機端長按保存（電腦網頁端鼠標右鍵保存）即可。

02應用地址

關注我，后臺回復“頭像”獲取資源

免責聲明

1、大部分資源來源于網絡，僅供學習和交流使用，嚴禁商用，如有侵權請聯系刪除！

2、所有軟件和資源都有時效性，如果遇到失效的請下載其他軟件代替！

在線咨詢

上一篇：html5的video標簽實現m3u8格式的支持，基于hls.min.js
下一篇：WordPress評論彈幕，讓你的博客變得好玩兒

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5實現頭像的上傳

TML5實現頭像的上傳

這是利用form-data給后臺傳輸數據，來實現頭像的上傳加載！

您的項目需求