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

(编辑：jimmy 日期: 2024/12/23 浏览：2)

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

常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的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="/UploadFiles/2021-04-02/jquery.min.js">

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 头像上传的资料请关注其它相关文章！

上一篇：Vue 简单实现前端权限控制的示例

下一篇：如何在JavaScript中正确处理变量