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 相关文章推荐
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
javascript实现评分功能
Jun 24 Javascript
vue实现简单加法计算器
Oct 22 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
如何在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
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
react 生命周期实例分析
2020/05/18 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
python interpolate插值实例
2020/07/06 Python
如何完美的建立一个python项目
2020/10/09 Python
python 图像增强算法实现详解
2021/01/24 Python
什么是组件架构
2016/05/15 面试题
给孩子的新年寄语
2014/04/08 职场文书
英语分层教学实施方案
2014/06/15 职场文书
六一亲子活动总结
2014/07/01 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
歌咏比赛主持词
2015/06/29 职场文书
德能勤绩工作总结
2015/08/11 职场文书