js触发input的打开文件选择器，将本地图片回显以及上传
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 事件将被触发。
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);
})
})
},
上传
格式为表单上传。
// 上传图片封装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
});
原文地址：https://blog.csdn.net/m0_46672781/article/details/135742752
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！