如何在文件上传中动态显示图像

debugcn 发表于 Dev

拉杰什

我已经创建了文件上传功能。我得到文件名和文件类型，不知道如何使用动态控件显示图像！

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);

}

恩兹弗勒普

这是我有一个有趣的项目的一些代码。

<!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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。