本文主要详细介绍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的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。