我有一個問題，但我無法擺脫它，所以請幫助我。我有一個輸入 IMG，并且有一個腳本可以顯示所選圖像。但是當輸入為空時，圖像屬性顯示黑色邊框。無法擺脫黑色邊框。這很令人沮喪。那么如果沒有選擇輸入，我該如何刪除邊框或圖像屬性呢？幫我！`<img id="uploadPreview" style="width: 100px; height: 100px;" /><input id="imgInp" type="file" name="myPhoto" onchange="PreviewImage();" />function PreviewImage() { var oFReader = new FileReader(); oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]); oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; };};
3 回答
慕婉清6462132
TA貢獻1804條經驗 獲得超2個贊
每次附加圖像源之前檢查圖像值是否為空。如果為空，則不執行任何其他操作，附加圖像 atr 或 source 。
當您在圖像屬性上添加任何內容時，它顯示的邊框意味著沒有找到圖像或未找到 img url。
const loadFile = function(event) {
const output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
URL.revokeObjectURL(output.src) // free memory
}
};
<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
撒科打諢
TA貢獻1934條經驗 獲得超2個贊
首先添加隱藏圖像的樣式
#uploadPreview{
display:none;
}
function PreviewImage() {
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
if(oFReader == "" || oFReader== null){
alert("image is empty")
}else{
oFReader.onload = function (oFREvent) {
document.getElementById("uploadPreview").src = oFREvent.target.result;
document.getElementById("uploadPreview").style = "display:block";
}
};
};
飲歌長嘯
TA貢獻1951條經驗 獲得超3個贊
也許可以用類似的東西來設計圖像線條：
border-width:0px; border:none;
這應該消除任何類型的邊界。
或者添加一個
display:none
完全隱藏圖像。
- 3 回答
- 0 關注
- 157 瀏覽
添加回答
舉報
0/150
提交
取消