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

html上传头像及预览,js实现头像上传并且可预览提交在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览,常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面;另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存。这两种方法各有利弊,方法一很明显,浪费流量和服务器资源;方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高。这里介绍的是直接在本地内存中…

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实现头像上传并且可预览提交分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/30464.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注