如何获取input，file里的文件，实现预览效果，并传给后端（）
1.如何实现file上传文件，预览效果
![如何获取input，file里的文件，实现预览效果，并传给后端（）]()
文章图片
uploadFile:function(ev){
var that = this;
const file = document.getElementById('pop_file');
const fileObj = file.files[0];
const windowURL = window.URL || window.webkitURL;
const img = document.getElementById('preview');
if(file && fileObj) {
const dataURl = windowURL.createObjectURL(fileObj);
img.setAttribute('src',dataURl);
}
}2.获取到file里的文件，使用异步的请求实现局部刷新的效果
addbanner: function(ev) {
var oFiles = document.getElementById("pop_file").files;
var params = new FormData();
params.append('file',oFiles[0]);
axios({
method: 'post',
url: 'http://请求路径/admin/BannerApi/actionBannerSave',
headers: {
'Content-type': 'application/x-www-form-urlencoded;
charset=UTf-8'
},
data: params
})
.then(function(response) {
console.log(response)
})
}
如果是ajax请求的话
var oFiles = document.getElementById("pop_file").files;
var params = new FormData();
params.append('file',oFiles[0]);
$.ajax({
type:'post',
url:'http://api.tianshuai.com.cn/admin/BannerApi/actionBannerSave',
data:params,
cache: false,
contentType: false,
processData: false,
success:function(data){
console.log(data)
}
})【如何获取input，file里的文件，实现预览效果，并传给后端（）】
推荐阅读
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 如何寻找情感问答App的分析切入点
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus使用queryWrapper如何实现复杂查询
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- java中如何实现重建二叉树
- Linux下面如何查看tomcat已经使用多少线程
- thinkphp|thinkphp 3.2 如何调用第三方类库
- 2019女表什么牌子好（如何挑选女士手表？）