使用FileReader制作一个简短图片上传

效果示例图
代码示例图

效果示例图

代码示例图

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="file" id="fileElem" multiple accept="image/*" style="display:none"onchange="handleFiles(this.files)"><button id="fileSelect">上传文件</button><div id="imgBox"></div></body><script type="text/javascript">const fileSelect = document.getElementById("fileSelect"),fileElem = document.getElementById("fileElem");fileSelect.addEventListener("click", function(e) {if (fileElem) {fileElem.click();}}, false);function handleFiles(files) {console.log("[files]", files)const tempFiles = files;for (let i = 0; i < files.length; i++) {//使用 FileReader() 构造器去创建一个新的 FileReader.const fr = new FileReader();/*** 处理事件*事件          描述*onabort      中断时触发*onerror       出错时触发*onload        文件读取成功完成时触发*onloadend       读取完成触发，无论成功或失败*onloadstart   读取开始时触发*onprogress  读取中* **/fr.onload = (e) => {console.log("[e]", e)tempFiles[i]['DataURL'] = e.currentTarget.result;const img = document.createElement("img");img.src = e.currentTarget.result;document.querySelector("#imgBox").appendChild(img)}/*** 方法名                参数      描述*abort                    none        中断读取*readAsBinaryString file        将文件读取为二进制码*readAsDataURL            file        将文件读取为 DataURL*readAsText           file, [encoding] 将文件读取为文本* **/fr.readAsDataURL(files[i])}console.log(tempFiles)}</script>
</html>

参考链接

使用FileReader制作一个简短图片上传相关推荐

分享一个react 图片上传组件支持OSS 七牛云
react-uplod-img 是一个基于 React antd组件的图片上传组件支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能需要 react 版本大于 v ...
form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果
作为一个初入前端的菜鸟,最近因为一个无刷新上传图片问题走了很多弯路,所以在这里给大家分享一下,不足之处希望谅解.无刷新上传图片一般有两种方式,一种是 form 表单+iframe ,还有一种是 aja ...
从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能...
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
php上传图片并显示代码,php图片上传代码（完整版已测试）
php图片上传代码本来是一个很简单的事,之前笔者图省事,直接网上下载了一个php图片上传小程序,结果导致wordpress网站被黑,因为留有后门,后来排查直接删除整个小程序,自己用重新写了一个php图 ...
【校招VIP】[约起来] 接口设计1：图片上传接口
今天来看商业实战项目约起来的第一个模块,活动发布模块的接口设计,这期课程包括两个接口,一个是图片上传,一个是活动发布后的提交. 首先了解图片上传接口,常规的图片上传需要前后端配合.前端通过接口传给后端 ...
【小程序】关于图片上传和在页面显示问题
最近在工作中遇到一个关于图片上传的问题.根据之前项目的经验,我知道目前这个公司上传图片有两种方式, 一种是把图片上传到公司服务器上,然后把图片放在服务器上的地址存在数据库中,要获得图片的时候直接从库中 ...
通过API接口实现图片上传
通过API接口实现图片上传需求近期在接口功能实现要求,实现一个API图片上传,补充商户开户后补充图片信息,用于管理人员审核. 业务要求图片有多条,法人信息,授权信息,等有必填图片,有非必填图片 ...
1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端
1小时搞定cropper.js制作头像/图片上传.裁剪.并发送至后端先给大家看一下最终效果. 大多数功能都是由Cropper.js封装好的,调整并制作了: 上传图片对图片的裁剪以及调整(旋转.缩放 ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

使用FileReader制作一个简短图片上传

使用FileReader制作一个简短图片上传

效果示例图

代码示例图

使用FileReader制作一个简短图片上传相关推荐

最新文章

热门文章