用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]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
在jquery中,可以利用�$("元素:not(:last-child)")”语句选择除了最后一列的其它元素;�:last-child”选择器可以选取最后一列元素,�:not()”选择器用于选取除指定元素以外的其它元素�
cropper.js+exif.js怎样实现头像上传的基本编辑操作,一些朋友可能会遇到这方面的问题,对此在下文小编向大家来讲解一下,内容详细,易于理解,希望大家阅读完这篇能有收获哦,有需要的朋友就往下看吧!
访问字面量和局部变量最快,而访问数组元素和对象成员相对较慢。访问对象成员时,就像作用域链一样,在原型链上搜紀如果找到的成员在原型链中的位置太深,访问速度就会变慢�
用jQuery怎样实现隐藏表的列元素?隐藏表的列元素还是比较实用的,本文实现的需求是隐藏表格里的某一列,这里使用到的方法是hide(),实现步骤及代码如下,需要的朋友可以参考,接下来跟随小编一起来学习一下吧�
Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,感兴趣的小伙伴们可以参考一�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078