我正在嘗試獲取一個檔案來更改形狀并將影像更改為人插入的內容。
<label for="avatarinput">
<img id="avatar" class="image" style="border-radius: 50%;" height="150" width="150" id="createForm" src= <%= image_url %> >
</label>
<input type="file" id="avatarinput" multiple accept=".jpg,.jfif,.jpeg,.png,.gif" name="filedata" /><br><br>
<script>
$("input[type=file]").on('change',function(){
let file = $(this).val();
$('#avatar').attr('src', file);
});
</script>
不允許加載本地資源：file:///C:/fakepath/scale_1200.jfif
uj5u.com熱心網友回復：
您應該使用 FileReader 從客戶端讀取檔案并將其設定在 img.src Attr 上。
$("input[type=file]").on('change',function(element){
let file = element.target.files[0];
// FileReader support
if (FileReader && file) {
var fr = new FileReader();
fr.onload = function () {
$('#avatar').attr('src', fr.result);
}
fr.readAsDataURL(file);
}}
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/468390.html
標籤：javascript html jQuery
上一篇：nodejs-打字稿在javascript檔案中不起作用
下一篇：如何重置所有輸入欄位的反應？