随着我们时代的发展，交流沟通不仅仅是局限于面对面，互联网提供了更为方便便捷的交流方式，各种交流软件层出不穷。在我们使用这些社交软件时，往往都需要自己提交一些简单的数据，包括自己想的网名，密码，个人资料等等。其中，头像就是其中之一。有的时候，我们会觉得想换个头像。那，这是如何实现的呢？

1.我们先做一个简单的页面布局

简单的做了一个图书app的图书添加页面。在图片上传处其实是个input标签，类型为file，只不过将他隐藏起来，用一个正方形框替代。当我们点击这个正方形图片框时，触发.click() 方法即可打开文件框。HTML代码如下：

<header>添加图书</header><main><div id="bookName"><p>书名:</p><input type="text" id="bkname"></div><div id="bookType"><p>所属分类:</p><input type="text" id="typ"></div><div id="pic">图片:<div id="headPic"><img src="../../imgs/def.jpg" ></div><input type="file" id="fil"></div><div id="info"><p>简介:</p><textarea></textarea></div><p><button type="button" id="btn">添加图书</button></p></main>

2.如何实现点击图片框，上传一张图片呢

简单来说，我们点击图片上传框，点击需要上传的图片后。我们需要拿到我们上传图片(文件)的相关信息，通过发送ajax请求，将相关数据传到后端。后端响应回来数据后，我们在将得到的图片信息传在图片框内。(这里需要注意的是，通常我们上传数据格式为JSON格式，但是图片需要格式为FormData格式) 看如下代码：

     let fil = document.querySelector('#fil') // 文件框，只不过隐藏了起来let headPic = document.querySelector('#headPic') //图片上传框headPic.addEventListener('click', function () {fil.click()  //点击上传图片，文件上传框打开})//头像上传fil.addEventListener('change', function (e) {//注意，头像上传时用的时change事件// console.log(this.files[0]);  //文件的信息都放在files里 let fd = new FormData()fd.append('imgurl', this.files[0])//原生ajax实现实现图片上传let xhr = new XMLHttpRequest() //创建ajax对象xhr.open('post', 'http://139.9.177.51:5000' + '/book/upload')xhr.send(fd)  //将格式处理好的数据，作为参数发送xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {let data = JSON.parse(xhr.responseText);console.log(data);img.src = 'http://139.9.177.51:5000' + data.imgurl}}})

这样就实现了简单的图片上传，也可以在另外页面进行渲染，不过需要通过相应的接口。实现头像（图片，文件）上传方式很多，这里是用原生Js来写，是为了方便理解基础性的知识哦！

简单基础的原生JS实现图片上传添加相关推荐

手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象效果图原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
原生js实现图片上传功能
在项目中用到了原生的上传功能,html5代码如下 <div class="uploadimg"><div v-for="(item, index) in ...
cupload怎么保存图片_原生js的图片上传插件cupload
插件描述:支持图片预览.像素限制.大小限制.多图上传.更新模式下页面初始化加载图片更新时间:2020-09-25 00:23:49 更新说明:添加删除时,同时删除服务器图片的功能,文档提供php ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
js实现图片上传预览功能
js实现图片上传预览功能很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片 <body><input type="file"><img s ...
前端js实现图片上传
前端js实现图片上传的原理是通过input标签的type=file属性将input标签定义为上传文件,对input进行onchange事件的监听,当input的value值改变时代表用户已经上传了图片 ...
H5移动端原生JS封装附件上传服务器
本文主要通过原生的js封装附件上传upload.js.可成功内嵌钉钉,ios和安卓端可正常使用,支持单个.多个附件上传. 一.业务需求封装原生JS附件上传,动态创建附件列表,可对附件列表进行删除和新 ...
node.js实现图片上传（包含缩略图）
图片上传使用multiparty插件实现上传安装multiparty npm i --save multiparty 代码实现 const multiparty = require('multip ...
html原生上传,一个基于HTML5及原生JS的文件上传组件--JohnUploader
运行效果图一.组件介绍基本特点基于HTML5的FileReader和FormData 可以完成多文件选择,并预览完成文件的异步上传原生XHR对象,适配多浏览器代码 class JohnUp ...

简单基础的原生JS实现图片上传添加

1.我们先做一个简单的页面布局

2.如何实现点击图片框，上传一张图片呢

简单基础的原生JS实现图片上传添加相关推荐

最新文章

热门文章