如何在文件上載動態顯示圖像

我已經創建了文件上傳功能。我得到文件名和文件類型，不知道如何使用動態控制顯示圖像！如何在文件上載動態顯示圖像

function AddFileUpload() { 

    var div = document.createElement('DIV'); 

    div.innerHTML = '<input id="file' + counter + '" name = "file' + counter + 

        '" type="file"/>' + 

        '<input id="Button' + counter + '" type="button" ' + 

        'value="Remove" onclick = "RemoveFileUpload(this)" />'; 

    document.getElementById("FileUploadContainer").appendChild(div); 

    counter++; 

} 

function RemoveFileUpload(div) { 

    document.getElementById("FileUploadContainer").removeChild(div.parentNode); 

}

來源

2014-10-10 Rajesh

我假設你使用Apache2 + PHP作爲web服務器？知道回答你的問題很重要。 – Steini 2014-10-10 06:02:29

不知道Apache2 + PHP。我想知道如何在文件上傳中動態顯示選定的圖像在JavaScript上 – Rajesh 2014-10-10 06:29:45

對不起，你的問題不是很清楚。 – Steini 2014-10-10 06:44:01

下面是一個關於換有趣的項目，我有一些代碼。

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function byId(e){return document.getElementById(e);} 

window.addEventListener('load', onDocLoaded, false); 

function onDocLoaded() 
{ 
    byId('mFileInput').addEventListener('change', onFileChosen, false); 
} 

// fileVar is an object as returned by <input type='file'> 
// imgElem is an <img> element - can be on/off screen (doesn't need to be added to the DOM) 
function loadImgFromFile(fileVar, imgElem) 
{ 
    var fileReader = new FileReader(); 
    fileReader.onload = onFileLoaded; 
    fileReader.readAsBinaryString(fileVar); 
    function onFileLoaded(fileLoadedEvent) 
    { 
     var result,data; 
     data = fileLoadedEvent.target.result; 
     result = "data:"; 
     result += fileVar.type; 
     result += ";base64,"; 
     result += btoa(data); 
     imgElem.src = result; 
     imgElem.origType = fileVar.type; // unnecessary for loading the image, used by a current project. 
    } 
} 

function onFileChosen(evt) 
{ 
    if (this.files.length != 0) 
    { 
     var tgtImg = byId('tgt'); 
     var curFile = this.files[0]; 
     loadImgFromFile(curFile, tgtImg); 
    } 
} 

</script> 
<style> 
</style> 
</head> 
<body> 
    <input id='mFileInput' type='file'/><br> 
    <img id='tgt' /> 
</body> 
</html>

來源

2014-10-10 06:23:04 enhzflep

它的工作，但我想在js中的多個文件上傳動態顯示相同 – Rajesh 2014-10-10 07:02:43

那麼，在文件輸入的'change'處理程序中，您需要遍歷fileobjects數組，而不是隻是簡單地獲取'curFile = this .files [0];'循環'this.files.length'次數，隨着時間的推移創建新的目標元素。我還想指出 - 所問的問題已得到解答 - 您現在已將問題更改爲旨在處理多個文件的問題。這不是它在SO上的工作方式。 – enhzflep 2014-10-10 07:57:20

如何在文件上載動態顯示圖像

回答

相關問題