js触发input的打开文件选择器,将本地图片回显以及上传
你可以通过以下 JavaScript 代码触发文件选择器:这里的场景不是通过input
标签来触达的文件选择器,这样对于样式较为复杂的上传可以在html结构上保持清爽愉快,不用多添加一个input标签。
选择文件
- 示例demo,理解思路
// 创建一个input元素
var input = document.createElement('input');
// 设置input类型为file,表示文件选择器
input.type = 'file';
// 添加change事件监听器,当用户选择文件后触发
input.addEventListener('change', function (event) {
// 获取选择的文件
var selectedFile = event.target.files[0];
// 在这里你可以处理选择的文件,比如读取内容或上传到服务器等
console.log('选择的文件:', selectedFile);
});
// 触发文件选择器
input.click();
这里的file,可以将一切媒体的类型的文件可以上传,但是有些场景只是上传图片,如何通过简单的方法实现呢?
input.accept
是用于指定文件选择器接受的文件类型的属性。通过设置 accept
属性,你可以限制用户只能选择特定类型的文件。这在需要特定类型文件的应用场景中很有用,例如只允许选择图像文件或文档文件。
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Input Example</title>
</head>
<body>
<label for="fileInput">选择图像文件:</label>
<input type="file" id="fileInput" accept="image/*">
<script>
// 添加change事件监听器,当用户选择文件后触发
document.getElementById('fileInput').addEventListener('change', function (event) {
// 获取选择的文件
var selectedFile = event.target.files[0];
// 在这里你可以处理选择的文件,比如读取内容或上传到服务器等
console.log('选择的文件:', selectedFile);
});
</script>
</body>
</html>
在上述示例中,文件选择器只允许选择图像文件,因为 accept
属性设置为 image/*
。你可以根据需要更改 accept
属性的值来限制文件类型。
- ok,那么这里的
accept
属性,我们只需要放在js代码中开始即可。例如只需要筛选图片,其实的文件被筛选掉。
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/gif,image/jpeg,image/jpg,image/png';
fileInput.click();
//or
fileInput.accept = 'image/*'
//但是大批量筛选会延时打开文件选择器弹窗的速度,所以只需要指定格式的即可
显示文件
在前端,input
标签的文件选择器在用户选择文件后会触发change
事件。你可以通过监听这个事件来获取用户选择的文件。当用户在文件选择框中选择一个文件并确认选择时,change
事件将被触发。文章来源:https://www.toymoban.com/news/detail-818982.html
fileInput.addEventListener("change",()=>{
// console.dir(fileInput);
const windowURL = window.URL || window.webkitURL; // 兼容操作
let fileObj = fileInput.files[0];
let url = windowURL.createObjectURL(fileObj);
this.$refs['photo1'].src=url;
//等待dom图片加载完毕,即可释放资源。
this.$nextTick(()=>{
URL.revokeObjectURL(url);
})
})
},
上传
格式为表单上传。文章来源地址https://www.toymoban.com/news/detail-818982.html
// 上传图片封装axios函数
export const POST_ADDPIC = (data)=>{
return http.post(API.ADDPIC,data,{
headers: {
'Content-Type': 'multipart/form-data'
},
});
}
//使用
const form = new FormData()
form.append('data', file);//let file = fileInput.files[0];
form.append('id',id);
POST_ADDPIC(form)
.then((res)=>{
//TODO
})
.catch((err)=>{
//TODO
});
到了这里,关于js触发input的打开文件选择器,将本地图片回显以及上传的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!