用JS怎么制作上传图片的功能,原理及方法是什�
Admin 2022-06-18 群英技术资�
前端上传图片的原理是:运用input type=“file”的标签获取图片,再使用FileReader这个对象 new 一个实例,通过这个对象的readAsDataURL()方法读取file标签获取的图片并转换为base64格式,完成之后通过ajax之类的方式传到后台�
HTML
需要一个input type="file" 的标� 如果需要预览的话可以再加一个img标签
<div class="warp"> <div class="warp-content">点击上传</div> <input type="file" id="file" /> </div> <img src="" />
JS
一、图片上传需要检测上传的图片是否变化,所以这里选择js的onchange事件.先获取input,img的dom元素,在input type=‘file'的demo元素下,有一个files属性,里面是我们上传的文件信息,打印一下,就可以看到上传文件的名字,类型等信息�
var file = document.getElementById('file'); var image = document.querySelector("img"); file.onchange = function() { var fileData = this.files[0];//这是我们上传的文� }
二、然后运� FileReader 这个对象,FileReader主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件。使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文�(或者原始数据缓�)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据。这里用到了里面� readAsDataURL 这个方法,它能把文件用base64格式读出�
使用方法
var reader = new FileReader(); reader.readAsDataURL(fileData);//异步读取文件内容,结果用data:url的字符串形式表示 /*当读取操作成功完成时调用*/ reader.onload = function(e) { console.log(e); //查看对象属性里面有个result属性,属性值,是一大串的base64格式的东西,这个就是我们要的图片 console.log(this.result);//取得数据 这里的this指向FileReader()对象的实例reader image.setAttribute("src", this.result)//赋值给img标签让它显示出来 }
FileReader对象的属性和事件
FileReader对象 官方文档
三、第二步操作完成我们就可以上传图片的功能了,用户再使用时我们不能保证用户上传的是什么东西,图片还是视频,需要判断一下上传的文件类型 input type=‘file'的demo元素下,有一个files属性它里面有文件类型的信息,我们可以通过这属性来判断上传文件类型。(reader.onload里面通过this.result可以获得图片的base64格式,把它赋值给一个变量传到后台,这样就完成了一个图片上传)
var file = document.getElementById('file'); var image = document.querySelector("img"); file.onchange = function() { var fileData = this.files[0];//获取到一个FileList对象中的第一个文�(File 对象),是我们上传的文件 var pettern = /^image/; console.info(fileData.type) if (!pettern.test(fileData.type)) { alert("图片格式不正�"); return; } var reader = new FileReader(); reader.readAsDataURL(fileData);//异步读取文件内容,结果用data:url的字符串形式表示 /*当读取操作成功完成时调用*/ reader.onload = function(e) { console.log(e); //查看对象 console.log(this.result);//要的数据 image.setAttribute("src", this.result) } }
全部代码�
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .warp { display: inline-block; vertical-align: bottom; position: relative; } .warp-content { border: 1px solid red; width: 150px; height: 150px; line-height: 150px; text-align: center; } input { position: absolute; top: 0; left: 0; border: 1px solid red; width: 150px; height: 150px; opacity: 0; cursor: pointer; } img { width: 300px; height: 300px; border: 1px solid red; margin-top: 50px; vertical-align: bottom; } </style> </head> <body> <div class="fileBox"> <div class="warp"> <div class="warp-content">点击上传</div> <input type="file" id="file" /> </div> <img src="" /> </div> <script type="text/javascript"> var file = document.getElementById('file'); var image = document.querySelector("img"); file.onchange = function() { var fileData = this.files[0];//获取到一个FileList对象中的第一个文�( File 对象),是我们上传的文件 var pettern = /^image/; console.info(fileData.type) if (!pettern.test(fileData.type)) { alert("图片格式不正�"); return; } var reader = new FileReader(); reader.readAsDataURL(fileData);//异步读取文件内容,结果用data:url的字符串形式表示 /*当读取操作成功完成时调用*/ reader.onload = function(e) { console.log(e); //查看对象 console.log(this.result);//要的数据 这里的this指向FileReader()对象的实例reader image.setAttribute("src", this.result) } } </script> </body> </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章给大家分享的是有关使用JS制作音乐导航的效果内容,实现效果如下,小编觉得比较有缺,对大家学习JavaScript有一定的帮助,因此分享给大家做个参考,感兴趣的朋友接下来一起跟随小编看看吧�
本篇文章给大家带来了关于JavaScript的相关知识,其中主要整理了事件监听的相关问题,包括了什么是事件监听、设置事件监听的方法等等内容,下面一起来看一下,希望对大家有帮助�
目录前言????目标????搭建开发环�????️生成模�????CSS预处理器????eslint????组件库编译⚡️vite的打包配置⚡️自动生成ts类型文件⚡️样式懒加载与全量加载????文档❤️npm 发布与发布前的测�????测试前言日常使用开源的组件库时我们或多或少的都会做一些自定义的配置来符合实际的设计,当这些设计形成一定规模时,设计狮们就会形成一�
简单复制对象的最外层属性,不处理对象更深层次的对象属性,会导致复制对象和原始对象的深层次属性指向同一个内存。如果一个对象改变了内存的地址,就会影响另一个对象�
线程和进程是计算机操作系统的基础概念,在程序员中属于高频词汇,那如何理解呢?Node.js 中的进程和线程又是怎样的呢?下面本篇文章就来一起了解一下,希望对大家有所帮助�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078