上傳相同的圖像文件兩次 - Javascript

我在我的繪圖應用程序中有一個圖像上傳器，用Javascript編寫。我想讓用戶在畫布上放置多個相同的圖像。但是，當我嘗試上載已經在畫布上的圖像時，沒有任何反應，並且我的事件處理程序中的斷點不會被擊中。怎麼回事，我該如何解決它？謝謝！上傳相同的圖像文件兩次 - Javascript

下面是我的圖像處理程序的代碼：

function handleImage(e) { 
var reader = new FileReader(); 
reader.onload = function(event) { 
    var img = new Image(); 
    img.onload = function() { 
    img.className = 'drag'; 
    img.style.left = 0; 
    img.style.top = 0; 
    context.drawImage(img, parseInt(img.style.left, 10) , parseInt(img.style.top, 10)); 
    images.push(img); 
    } 
    img.src = event.target.result; 
} 
reader.readAsDataURL(e.target.files[0]); 
};

來源

2013-07-15 user2584267

+10

你爲什麼要不止一次上傳同一個文件？重新使用上傳的文件！ –

我剛纔認爲這是用戶插入重複圖像的最直觀方式。 – user2584267

除了再次上傳相同的圖像，用戶將如何指示他們希望畫布上的兩幅圖像呢？ – user2584267

我傾向於劉若英鍋同意再次使用相同的圖像（重複按鈕），但你仍然不能防止用戶插入/再次加載相同的圖像。我前一段時間遇到過這個問題，並使用這段代碼來檢查圖像是否已經被緩存（如果緩存，沒有負載，因此onload也不會觸發）。

var img = new Image(); 
img.src = event.target.result; 

var insertImage = function() { 
    img.className = 'drag'; 
    img.style.left = 0; 
    img.style.top = 0; 
    context.drawImage(img, parseInt(img.style.left, 10) , parseInt(img.style.top, 10)); 
    images.push(img); 
    } 

if(img.complete){ 
    img.onload = insertImage; 
} else { 
    insertImage(); 
}

希望有所幫助。

來源

2013-07-23 03:52:08

上傳相同的圖像文件兩次 - Javascript

回答

相關問題