本文主要详细介绍js的上传图片功能。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。
上传前端图片的原理是:使用input type="file "的标签获取图片,然后使用对象FileReader创建一个新的实例。该对象的readAsDataURL()方法读取文件标签获取的图片,并将其转换为base64格式。完成后通过ajax之类的传输到后台。
HTML
你需要一个input type='file '标签,如果需要预览的话可以再添加一个img标签。
div class='warp '
点击上传/div
输入类型='文件' id='文件'/
/div
img src='' /
JS
第一,图片上传需要检测上传的图片是否有变化,所以这里选择js的onchange事件。首先,获取input和img的dom元素。在input type=' file '的demo元素下,有一个files属性,包含我们上传的文件的信息。打印出来后可以看到上传文件的名称、类型等信息。
var file=document . getelementbyid(' file ');
var image=document . query selector(' img ');
file.onchange=function() {
var file data=this . files[0];//这是我们上传的文件
}
其次,使用FileReader对象。FileReader主要用于将文件的内容读入内存。通过一系列异步接口,可以在主线程中访问本地文件。使用FileReader对象,web应用程序可以异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,并可以使用File对象或Blob对象来指定要处理的文件或数据。这里使用了readAsDataURL的方法,可以读取base64格式的文件。
使用方法
var reader=new FileReader();
reader . readasdataurl(file data);//异步读取文件内容,结果表示为一串数据:url
/*当读取操作成功完成时调用*/
reader.onload=函数(e) {
console . log(e);//检查对象属性。有一个结果属性,属性值,是base64格式的一堆东西。这是我们想要的照片。
console . log(this . result);//获取数据。这里指向FileReader()对象的实例读取器
Image.setattribute ('src ',this . result)//给img标签赋值使其显示。
}
FileReader对象的属性和事件
FileReader对象的正式文档
第三,第二步完成后,我们就可以上传图片了。当用户重复使用时,我们不能保证用户上传的是什么,图片还是视频。我们需要判断上传的文件类型。在输入类型=' file '的demo元素下,有一个包含文件类型信息的files属性。我们可以通过这个属性来判断上传的文件类型。(在reader.onload中,可以通过this.result获取图像的base64格式,并将其赋给一个变量传递给后台,从而完成一次图像上传)
var file=document . getelementbyid(' file ');
var image=document . query selector(' img ');
file.onchange=function() {
var file data=this . files[0];//获取FileList对象中的第一个文件(File对象),也就是我们上传的文件。
var pet tern=/^image/;
console.info(fileData.type)
如果(!pettern.test(fileData.type)) {
Alert('图片格式不正确');
返回;
}
var reader=new FileReader();
reader . readasdataurl(file data);//异步读取文件内容,结果表示为一串数据:url
/*当读取操作成功完成时调用*/
reader.onload=函数(e) {
console . log(e);//查看对象
console . log(this . result);//所需的数据
image.setAttribute('src ',this.result)
}
}
所有代码:
!文档类型html
超文本标记语言
头
meta charset='utf-8 '
标题/标题
style type='text/css '。翘曲
显示:内嵌-块;
垂直对齐:底部;
位置:相对;
}。扭曲内容{
边框:1px纯红;
宽度:150像素
高度:150像素
行高:150像素;
文本对齐:居中;
}
输入{
位置:绝对;
top:0;
左:0;
边框:1px纯红;
宽度:150像素
高度:150像素
不透明度:0;
光标:指针;
}
img {
宽度:300像素
高度:300像素
边框:1px纯红;
边距-顶部:50px
垂直对齐:底部;
}
/风格
/头
身体
div class='fileBox '
div class='warp '
div class='翘曲内容'点击上传/div
输入类型='文件id='文件'/
/div
img src='' /
/div
脚本类型='文本/javascript '
var文件=文档。getelementbyid(' file ');
var image=文档。查询选择器(“img”);
file.onchange=function() {
var文件数据=this。文件[0];//获取到一个文件列表对象中的第一个文件(文件对象),是我们上传的文件
var pet tern=/^image/;
console.info(fileData.type)
如果(!pettern.test(fileData.type)) {
警报('图片格式不正确');
返回;
}
var reader=new FileReader();
读者。readasdataurl(文件数据);//异步读取文件内容,结果用数据:url的字符串形式表示
/*当读取操作成功完成时调用*/
reader.onload=函数(e) {
控制台。日志(e);//查看对象
控制台。日志(这个。结果);//要的数据这里的这指向FileReader()对象的实例读者
image.setAttribute('src ',this.result)
}
}
/脚本
/body
/html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。