最简单的js实现上传头像并正常回显

既然有上传头像功能，那用户肯定得选择完照片后显示出来，

废话不多说，下面就是提供一段简单的代码来实现，希望对大家也有帮助；

h5 部分

 <!--头像--><div class="head-p" id="touxiang"><img  src="/img/user_pic_big.jpg" alt='头像'  width="100" height="100" id="avatar_img"></div><div  id="fromTx"><input type="file" class="file"  name="avatar" id="avatar"></div>

js让图片显示方式

// 头像预览
$("#avatar").change(function () {//拿到文件数据var choose_file = $(this)[0].files[0];//截取图片名称小数点后的字符串var ftype=choose_file.name.substring(choose_file.name.lastIndexOf(".")+1);//校验格式是否是图片类型if(ftype=="jpg" || ftype=="png" || ftype=="jpeg" || ftype == "JPG"){//限制大小，照片大小不能超过1Mvar size = choose_file.size / 1024 / 1024;if (size > 1) {alert("头像不能大于1M");return false;}// 实例化一个阅读器对象var reader = new FileReader();// 读取文件的路径，没有返回值,结果在reader.result里reader.readAsDataURL(choose_file);// 读取需要时间，读完后再修改图片路径reader.onload=function () {//回显给上方图片中$("#avatar_img").attr("src",this.result); }}else{alert("头像格式不对，请重新选择！");return false;}
});

代码就这么简单，如有问题请留言一起讨论~

最简单的js实现上传头像并正常回显相关推荐

html上传头像及预览,JS实现上传头像并实时预览
说起各大网站的用户中心功能,其中就少不了用户头像上传这个小小的功能,如果我们依托框架来编写的的话,相信非常的容易,但如果我们自己来单纯的使用JS来实现头像上传,并在选择本地头像的时候,实现预览我想也是 ...
java 图片回显_java实现Simditor图片上传七牛云并回显
首先呢,我们有这样一个需求: 当图片上传Simditor时,将其保存到七牛云上,然后并回显在我们的Simditor中. 首先,需要我们有一个七牛云帐号,并且配置Simditor富文本编辑器. 其次,我 ...
vue使用element-ui上传多张图片及回显
效果: vue封装上传接口:storage.js import axios from 'axios' import { Message } from 'element-ui' const servic ...
图片上传本地预览(回显)插件
图片上传本地预览插件,本示例只是静态页面,请下载完整的示例查看请下载完整的js和css样式,以及Demo <html><title>文件上传</title>< ...
vue+elemnt ul 图片上传隐藏按钮+图片回显
技术栈: vue2.6 +element 需求:在弹窗中实现图片上传,上传之后隐藏上传按钮,实现放大和删除功能,修改时回显图片. 具体实现效果如图所示: 1.隐藏上传按钮在el-upload中绑定一 ...
js实现上传头像（看了你就懂，相信我）
效果图: html: <div class="tx ovf"><div class="tit">头像</div><di ...
vue 移动端头像裁剪_移动端上传头像并裁剪功能(h5)
移动端头像图片上传裁剪 .button { outline: 0; display: inline-block; margin-bottom: 0; font-weight: 400; text-al ...
cropper.js 实现HTML5 裁剪上传头像
cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) option相关参数说明: viewMode 显示模式 Type: Number Default: 0 Options: 0: ...
html上传头像及预览,js实现头像上传并且可预览提交
在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览, 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是, ...

最简单的js实现上传头像并正常回显

最简单的js实现上传头像并正常回显相关推荐

最新文章

热门文章