js实现头像上传并且可预览提交


Posted in Javascript onDecember 25, 2020

在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览,

常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面;另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存。

这两种方法各有利弊,方法一很明显,浪费流量和服务器资源;方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高。

这里介绍的是直接在本地内存中预览图片,用户确认提交后再上传至服务器保存这种方法

html

<div class="reHead">
   <P class="content-format">头像支持jpg、png、jpeg格式,文件大小最大不能超过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)';  //默认显示的图片

    // 监听change事件:
    fileInput.addEventListener('change', upImg);

    // 头像上传逻辑函数
    function upImg(){
      preview.style.backgroundImage = '';    // 清除背景图片
      if (!fileInput.value) {   // 检查文件是否选择:
        $('#test-image-preview').addClass('icon-bianjitouxiang');
        info.innerHTML = '没有选择文件';
      }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 提交头像到服务器

$("#upImgSub").click(function () {
      $.ajax({
        type:'post',
        data:{'newHead':dataBase64},
        async:false,   // 当async属性的值为false时是同步的,Ajax请求将整个浏览器锁死,只有ajax请求返回结果后,才执行ajax后面的alert语句。  (虽然可行,但是不推荐)              // 当async属性的值为true时是异步的,即不会等待ajax请求返回的结果,会直接执行ajax后面的alert语句。    (后期介绍异步请求解决回地狱)
        dataType:'json',
        url:'/index/img',
        success:function (res) {  // 返回成功
          if(res.code === 200){
            alert(msg)     // 上传成功
          }else{
            alert(msg)     // 上传失败
          }
        },
        error:function () {
          alert("接口错误");    // 返回失败
        }
      })
    });

当async属性的值为false时是同步的,Ajax请求将整个浏览器锁死,只有ajax请求返回结果后,才执行ajax后面的alert语句。 (虽然可行,但是不推荐) 当async属性的值为true时是异步的,即不会等待ajax请求返回的结果,会直接执行ajax后面的alert语句。 (后期介绍异步请求解决回地狱)

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实现头像上传并且可预览提交的详细内容,更多关于js 头像上传的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript的public、private和privileged模式
Dec 28 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
Three.js学习之网格
Aug 10 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
如何在JavaScript中正确处理变量
Dec 25 #Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 #Vue.js
vue使用require.context实现动态注册路由
Dec 25 #Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 #Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 #Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 #Vue.js
React中使用Vditor自定义图片详解
Dec 25 #Javascript
You might like
php隐藏实际地址的文件下载方法
2015/04/18 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
Vue.js render方法使用详解
2017/04/05 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
深入理解node.js http模块
2018/01/24 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
numpy.where() 用法详解
2019/05/27 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
JSF界面控制层技术
2013/06/17 面试题
中专毕业自我鉴定
2013/10/16 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
大学生见习报告总结
2014/11/04 职场文书
优秀教研组申报材料
2014/12/26 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
JS实现扫雷项目总结
2021/05/19 Javascript