如何將上傳的圖像插入到 html < img > 標記中？是否可以創建< img > 標記作為上傳圖像的占位符？我可以選擇一個圖像與“<輸入類型=”文件“名稱=”文件到上傳“id=”文件到上傳“>”，在此之后，我想將該圖像發送到img占位符。是否可以在用戶關閉網站后從占位符中刪除上傳的圖像？多謝！
3 回答
鴻蒙傳說
TA貢獻1865條經驗 獲得超7個贊
第一個“src”稱為“屬性”
你必須做什么
1-在服務器上找到您的圖像 - >查看您首先將文件上傳到的位置
2-獲取文件的路徑并將其放在“src”“屬性”中
前任：
1-您上傳的圖像讓我們說項目/圖像
2-您的圖像路徑將位于項目/圖像/圖像中.jpg
3-采取這部分和但它在 src 屬性里面
src="project/images/image.jpg"
www說
TA貢獻1775條經驗 獲得超8個贊
你可以像這樣嘗試
<input type="file" id="docpicker" accept="image/*" onChange={updateImageDisplay} multiple></input>
<div class="previewContainer">
<p>No files currently selected for upload</p>
</div>
const updateImageDisplay = ss => {
const input = document.querySelector('input');
const previewContainer = document.querySelector('.previewContainer');
[...input.files].forEach(file => {
const image = document.createElement('img');
image.src = URL.createObjectURL(file);
previewContainer.appendChild(image);
})
}
RISEBY
TA貢獻1856條經驗 獲得超5個贊
嘗試使用畫布裁剪圖像
const updateImageDisplay = () => {
const input = document.querySelector('input');
const previewContainer = document.querySelector('.previewContainer');
[...input.files].forEach(file => {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
var sourceX = 150;
var sourceY = 0;
var sourceWidth = 150;
var sourceHeight = 150;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var destY = canvas.height / 2 - destHeight / 2;
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};
imageObj.src = URL.createObjectURL(file);
previewContainer.appendChild(canvas);
})
}
- 3 回答
- 0 關注
- 184 瀏覽
添加回答
舉報
0/150
提交
取消