js上传文件并预览文件内容

1.获取文件内容：
selectFile = (e) => {
const file = e.target.files[0];
console.log('file>>>>',file);//此时发现找不到文件内容
if (!!file) {
// 使用 FileReader 来读取文件
let reader = new FileReader()
// 读取纯文本文件,且编码格式为 utf-8
reader.readAsText(file, 'UTF-8')
//图片类: reads.readAsDataURL(file);
// 读取文件,会触发 onload 异步事件,可使用回调函数来获取最终的值.
reader.onload = function (e) {
let fileContent = e.target.result//图片类可将此值赋给img.src
console.log('fileContent>>>>',fileContent)
}
}
}
2.上传文件：
<input className="upload_ipt" type="file" id="file" onChange={(e)=>{this.selectFile(e)}}></input>
selectFile = (e) => {
const file = e.target.files[0];
const max_size = 1024 * 1024 * 20
if(file.size <= max_size){
if(/.(jpg|png|fpx|svg|psd)$/.test(file.name)){
const data = new FormData();
data.append('file', file);
Upload(data).then((res)=>{
const resdata = res.data
if (resdata.code === 0) {
......
}else {
alert("其它原因错误")
}
}).catch((error)=>{
console.log("axios catch error:",error)
alert("服务端错误")
})
}else{alert("上传图片必须是jpg/png/fpx/svg/psd格式！")}
}else{alert("文件大小不能超过20M")}
}

js上传文件并预览文件内容相关推荐

js上传视频，预览视频
js上传视频,预览视频 <videostyle="width:300px; height:auto;object-fit: fill;"playsinlinecontrols ...
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件
vue3 el-upload 上传附件及预览限制只能上传一个图片或者pdf格式的文件效果如图直接看代码吧 template部分 <div class="file-upload&q ...
2016/4/19 ①单个文件上传 ②上传图片后预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
struts上传word和excel文件到oracle,Struts文件上传,下载,重传,预览
[Struts2]☆★之文件上传,下载,重传,预览今日群里一兄弟问我能否给一份struts文件上传下载的例子,因为自己项目比较紧所以想在网上找些源码给他,但是纵观全网,写的都不是太全,这让新手使用 ...
html上传头像及预览,js实现头像上传并且可预览提交
在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览, 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是, ...
html上传头像及预览,JS实现上传头像并实时预览
说起各大网站的用户中心功能,其中就少不了用户头像上传这个小小的功能,如果我们依托框架来编写的的话,相信非常的容易,但如果我们自己来单纯的使用JS来实现头像上传,并在选择本地头像的时候,实现预览我想也是 ...
JavaScript 实现图片上传前本地预览
JavaScript 实现图片上传前本地预览图片上传前预览,应该算是一个普遍的需求,很多时候可能选中的图片并不是想要的那张,所以需要上传前预览下. JS(浏览器中)是一门特殊的语言,它没有直接读写磁 ...
iOS学习：调用相机，选择图片上传，带预览功能
iOS学习:调用相机,选择图片上传,带预览功能发表于2年前(2013-05-30 21:38) 阅读( 18194) | 评论( 16) 27人收藏此文章,我要收藏赞3 8月22日珠海 OSC ...
网页中动态嵌入PDF文件/在线预览PDF内容
网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发 ...
SpringBoot实现PPT格式文件上传并在线预览
1.需要引入依赖 <dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf< ...

js上传文件并预览文件内容

js上传文件并预览文件内容相关推荐

最新文章

热门文章