Question

我创建了多文件（图片）上传选项。我编码了图像文件并将它们存储在一个数组中。我正在尝试编码和解码图像。我正在使用FileReader的readAsDataURL方法将图像转换为base64。现在我想转换图像（原始文件）以获取下载选项。

我的代码是

<html>
<body>

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" multiple />
<div id="imgTest"></div>
<script type='text/javascript'>

    function encodeImageFileAsURL(index) {
        var filesSelected = document.getElementById("inputFileToLoad").files;
        index = index || 0;
        if (filesSelected.length > 0 && index < filesSelected.length) {
            var fileToLoad = filesSelected[index];

            var fileReader = new FileReader();

            fileReader.onloadend = function(fileLoadedEvent) {
                var srcData = fileLoadedEvent.target.result; // <--- data: base64

                var newImage = document.createElement('img');
                newImage.src = srcData;

                document.getElementById("imgTest").appendChild(newImage);
                if (index < filesSelected.length) {
                    encodeImageFileAsURL(index + 1)
                }
                console.log(srcData);    
            }
            fileReader.readAsDataURL(fileToLoad);

            var sourceArray = new Array(); // put this before the function delaction 


                fileReader.onloadend = function (fileLoadedEvent) {
                    var srcData = fileLoadedEvent.target.result; // <--- data: base64

                    sourceArray.push(srcData);

                    var newImage = document.createElement('img');
                    newImage.src = srcData;

                    document.getElementById("imgTest").appendChild(newImage);
                    if (index < filesSelected.length) {
                        encodeImageFileAsURL(index + 1)
                    }
                    alert( fileLoadedEvent.target.result);
                    var imgSrc= fileLoadedEvent.target.result;
                    console.log(imgSrc);
                    //console.log(sourceArray);
                    //alert( fileLoadedEvent.target.result);

                    }
        }
    }

</script>
</body>
</html>

如何使用input type =“File”

对已上载的图像文件（多个）进行编码和解码

使用base64图像编码/解码图像

0 个答案: