js觸發(fā)input的打開文件選擇器，將本地圖片回顯以及上傳
你可以通過以下 JavaScript 代碼觸發(fā)文件選擇器：這里的場景不是通過input標(biāo)簽來觸達(dá)的文件選擇器，這樣對于樣式較為復(fù)雜的上傳可以在html結(jié)構(gòu)上保持清爽愉快，不用多添加一個(gè)input標(biāo)簽。
選擇文件
- 示例demo，理解思路
// 創(chuàng)建一個(gè)input元素
var input = document.createElement('input');
// 設(shè)置input類型為file，表示文件選擇器
input.type = 'file';
// 添加change事件監(jiān)聽器，當(dāng)用戶選擇文件后觸發(fā)
input.addEventListener('change', function (event) {
// 獲取選擇的文件
var selectedFile = event.target.files[0];
// 在這里你可以處理選擇的文件，比如讀取內(nèi)容或上傳到服務(wù)器等
console.log('選擇的文件:', selectedFile);
});
// 觸發(fā)文件選擇器
input.click();
這里的file，可以將一切媒體的類型的文件可以上傳，但是有些場景只是上傳圖片，如何通過簡單的方法實(shí)現(xiàn)呢？
input.accept 是用于指定文件選擇器接受的文件類型的屬性。通過設(shè)置 accept 屬性，你可以限制用戶只能選擇特定類型的文件。這在需要特定類型文件的應(yīng)用場景中很有用，例如只允許選擇圖像文件或文檔文件。
實(shí)例：
<!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事件監(jiān)聽器，當(dāng)用戶選擇文件后觸發(fā)
document.getElementById('fileInput').addEventListener('change', function (event) {
// 獲取選擇的文件
var selectedFile = event.target.files[0];
// 在這里你可以處理選擇的文件，比如讀取內(nèi)容或上傳到服務(wù)器等
console.log('選擇的文件:', selectedFile);
});
</script>
</body>
</html>
在上述示例中，文件選擇器只允許選擇圖像文件，因?yàn)?accept 屬性設(shè)置為 image/*。你可以根據(jù)需要更改 accept 屬性的值來限制文件類型。
- ok，那么這里的
accept屬性，我們只需要放在js代碼中開始即可。例如只需要篩選圖片，其實(shí)的文件被篩選掉。
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/gif,image/jpeg,image/jpg,image/png';
fileInput.click();
//or
fileInput.accept = 'image/*'
//但是大批量篩選會(huì)延時(shí)打開文件選擇器彈窗的速度，所以只需要指定格式的即可
顯示文件
在前端，input 標(biāo)簽的文件選擇器在用戶選擇文件后會(huì)觸發(fā)change事件。你可以通過監(jiān)聽這個(gè)事件來獲取用戶選擇的文件。當(dāng)用戶在文件選擇框中選擇一個(gè)文件并確認(rèn)選擇時(shí)，change 事件將被觸發(fā)。文章來源：http://www.zghlxwxcb.cn/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);
})
})
},
上傳
格式為表單上傳。文章來源地址http://www.zghlxwxcb.cn/news/detail-818982.html
// 上傳圖片封裝axios函數(shù)
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
});
到了這里，關(guān)于js觸發(fā)input的打開文件選擇器，將本地圖片回顯以及上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
