html上传头像及预览,js实现头像上传并且可预览提交
在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览,
常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面;另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存。
这两种方法各有利弊,方法一很明显,浪费流量和服务器资源;方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高。
这里介绍的是直接在本地内存中预览图片,用户确认提交后再上传至服务器保存这种方法
html
头像支持jpg、png、jpeg格式,文件大小最大不能超过1M
上传文件
保存
js 上传头像
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 头像上传的资料请关注脚本之家其它相关文章!
html上传头像及预览,js实现头像上传并且可预览提交相关推荐
- js如何上传大文件到服务器,js将文件上传到远程服务器
js将文件上传到远程服务器 内容精选 换一换 将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式.本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows云 ...
- wangEditor自定义上传图片上传按钮,适合各种JS或者后端上传
wangEditor是一款优秀的国产编辑器. 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 但是自身带的图片上传在上传七牛云可能存在版本问题.还有如果是其他云的JS上传 ...
- go语言接收html上传的文件,html5原生js拖拽上传(golang版)
package main import ("fmt" "io" "net/http" "os")const( uploa ...
- js实现图片上传预览及进度条
js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
- js实现图片上传预览功能
js实现图片上传预览功能 很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片 <body><input type="file"><img s ...
- anguarjs 上传图片预览_前端图片上传那些事儿
本文转自:掘金 作者:chess 前言 本文讲的图片上传,主要是针对上传头像的.大家都知道,上传头像一般都会分成以下 4 个步骤: 选择图片 -> 预览图片 -> 裁剪图片 -> 上 ...
- 1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端
1小时搞定cropper.js制作头像/图片上传.裁剪.并发送至后端 先给大家看一下最终效果. 大多数功能都是由Cropper.js封装好的,调整并制作了: 上传图片 对图片的裁剪以及调整(旋转.缩放 ...
- ASP.NET工作笔记之一:图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
- 带图片预览功能的图片上传
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
最新文章
- jquery跟js初始化加载的多种方法及区别介绍
- Java多线程系列七——ExecutorService
- 【SeeMusic】视频编辑 ( 视频 X 坐标 | 视频 Y 坐标 | 视频旋转 | 视频扭曲 )
- js表格中将每行的两个数据求和显示_python数据分析相关【一】
- mycat 10 分钟轻松入门
- 百度牵头,全球首个面向商业化运营的Robotaxi技术标准正式发布
- 南明区将引进和培养大数据高端人才逾千名
- Spring Cloud 第一天课堂笔记
- 大数据面试题及答案 汇总版
- 为什么余额宝要不断限制用户购买?
- 杭电2066一个人的旅行(spfa)
- 【报告分享】2020年教育行业OMO模式转型现状研究报告.pdf(附下载链接)
- 计算机网络(读书笔记)
- 测试软硬件系统信息的工具 -- EVEREST Ultimate Edition
- MemoryBarrier方法
- 三星 4521 linux 驱动下载,三星4521f驱动
- Could not read JSON: Can not deserialize instance of java.lang.String[] out of VALUE_STRING token
- 物联网与计算机的区别与联系,你真的知道什么是物联网?物联网芯片又和普通芯片有何区别?...
- 额头、太阳穴、两鬓长痘痘怎么回事?
- 3D Max合并两个.max文件
热门文章
- Psins代码解析之全局变量轨迹仿真(test_SINS_trj.m)惯性解算(test_SINS.m)
- 天文数据批量下载笔记
- java课题背景,办公自动化系统论文-课题研究的背景和意义及国内外发展状况.doc...
- 小米4可以刷入linux,小米4刷入SailfishOS系统图文教程(附工具)
- 教育知识与能力·中学
- win7官方原版iso镜像_官方原版下载!Windows 10 v1909简体中文ISO镜像
- 如何有效建立触摸屏与PLC之间无线通讯?
- 通过socks 代理 攻击局域网的电脑
- 指纹支付 android 9,华为G9青春版怎么设置指纹功能? 华为G9指纹支付解锁的教程...
- Windows10连接Google手机,短信照片同步折腾记录