AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

HTML5实现头像的上传

2022-05-23 607
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HTML5实现头像的上传，简单的一个小demo

这是利用form-data给后台传输数据，来实现头像的上传加载！

  1. 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>
  1. 样式代码
.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%;
        }
  1. javescript代码
var file = document.querySelector('[type=file]');
        var sub = document.querySelector('[type=button]');
        var show = document.querySelector('.showarea');
        var progress = document.querySelector('progress');
        var Susername = document.getElementById('Susername');
        var Ssex = document.getElementById('Ssex');
        var Sage = document.getElementById('Sage');
        var Smajor = document.getElementById('Smajor');
        var Sschool = document.getElementById('Sschool');
        var Sqq = document.getElementById('Sqq');
        var Saddress = document.getElementById('Saddress');
        var Smotto = document.getElementById('Smotto');
        sub.onclick = function(e){
            var fileobje = file.files[0];
            var formdata = new FormData();
            formdata.append('upload',fileobje);
            formdata.append('upload',Susername.value);
            formdata.append('upload',Ssex.value);
            formdata.append('upload',Sage.value);
            formdata.append('upload',Smajor.value);
            formdata.append('upload',Sschool.value);
            formdata.append('upload',Sqq.value);
            formdata.append('upload',Saddress.value);
            formdata.append('upload',Smotto.value);
            var xhr = new XMLHttpRequest();
            var fr = new FileReader();
            fr.readAsDataURL(fileobje)
            fr.onload=function(e){
                // console.log(e);
                var img = document.createElement('img');
                img.src = this.result;
                // console.log( img.src);
                show.appendChild(img)
            }
            xhr.upload.onprogress = function(e){
                progress.value= parseInt(e.loaded/e.total*100)
            }
          xhr.open("POST","http://127.0.0.1:3000/avatar")
        //   console.log(formdata)
          xhr.send(formdata);
          console.log(formdata)
        console.log(formdata.getAll("upload"))
        }
文章标签：
HTML5
移动开发
拼搏的小浣熊
目录
相关文章
邱宜平
|
移动开发 前端开发 HTML5
html5 canvas 头像上传
html5 canvas 头像上传
邱宜平
2222 0
二二*一一
|
1月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
113 1
疯狂的猿
|
1天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
疯狂的猿
64 24
东方睿赢
|
1月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
61 7
土木林森
|
1月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
37 6
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
48 1
龙大吉
|
1月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容，旨在提升开发效率、网站性能和用户体验。
龙大吉
45 5
进步`于辰
|
1月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
37 1
[HTML、CSS]知识点
LALA
|
1月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
LALA
65 12
温轻舟
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
147 1

热门文章

最新文章

  • 1
    Python 爬虫必备杀器，xpath 解析 HTML
  • 2
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 3
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
  • 4
    HTML（HyperText Markup Language，超文本标记语言）
  • 5
    太便利了 ！通义灵码方便生成html页面
  • 6
    HTML5 新的 Input 类型2
  • 7
    HTML（HyperText Markup Language）和XML（Extensible Markup Language）
  • 8
    HTML5 元素2
  • 9
    高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
  • 10
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
  • 1
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    143
  • 2
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    76
  • 3
    好看的html网站维护源码
    248
  • 4
    html+echars图表加日期检索
    62
  • 5
    html+echars的统计报表
    70
  • 6
    【CSDN创作优化1】个人简介优化 html font属性
    67
  • 7
    一种pug与html相互转换的工具
    107
  • 8
    android TextView HTML 的效果
    49
  • 9
    BeautifulSoup 是一个 Python 库，用于从 HTML 和 XML 文件中提取数据
    149
  • 10
    HTML5/CSS3粒子效果进度条代码
    75

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)