文件阅读器Javascript_Javascript_Filereader

文件阅读器Javascript

javascript

文件阅读器Javascript,javascript,filereader,Javascript,Filereader,目前，我正在选择一个文件，并将其转换为base64字符串并显示在html页面中。请参阅下面的代码。但我希望在加载函数时，它能自动从保存图像的位置获取文件，并转换为base64并显示。我只想跳过手动选择的方式。请帮忙 <html> <body> Choose File: <input id="imageToLoad" type="file" onchange="displayImage();" /> <p>Image encoded</p&g

目前，我正在选择一个文件，并将其转换为base64字符串并显示在html页面中。请参阅下面的代码。但我希望在加载函数时，它能自动从保存图像的位置获取文件，并转换为base64并显示。我只想跳过手动选择的方式。请帮忙

<html>
<body>
Choose File: <input id="imageToLoad" type="file" onchange="displayImage();" />
<p>Image encoded</p>
<textarea id="base64TextArea" style="width:550;height:240" ></textarea>
<img id="myImg" width="218" height="300"  src="" />
<script type="text/javascript">

function displayImage()
{
    var filesSelected = document.getElementById("imageToLoad").files;


    if (filesSelected.length > 0)
    {
        var fileToLoad = filesSelected[0];

        var fileReader = new FileReader();

        fileReader.onload = function(fileLoadedEvent) 
        {



            base64TextArea.innerHTML = fileLoadedEvent.target.result;
            document.getElementById("myImg").src = fileLoadedEvent.target.result;
        };

        fileReader.readAsDataURL(fileToLoad);
    }
}

</script>

</body>
</html>


选择文件：
图像编码
函数displayImage（）
{
var fileselected=document.getElementById（“imageToLoad”）.files；
如果（fileselected.length>0）
{
var fileToLoad=fileselected[0]；
var fileReader=newfilereader（）；
fileReader.onload=函数（fileLoadedEvent）
{
base64TextArea.innerHTML=fileLoadedEvent.target.result；
document.getElementById（“myImg”）.src=fileLoadedEvent.target.result；
};
readAsDataURL（fileToLoad）；
}
}

使用JS无法在客户端计算机上获取任意文件。在大多数浏览器中，客户端必须手动选择脚本要处理的文件

如果你仔细想想，如果任何网站可以访问你电脑上的任何文件，这将是一个重大的安全漏洞

我不知道为什么Base64在这里是一个重要方面。如果将图像转换为文本是您需要的特定要求，请提供一些详细信息，但如果您只想显示和引用图像，可以从以下内容开始：

if (filesSelected.length > 0)
    {
        var fileToLoad = filesSelected[0];

        document.getElementById("myImg").src = URL.createObjectURL(fileToLoad);
    }

这将使用一个“对象URL”，这是一种速记方式，用于引用已拖放或从

文件中拾取的文件。此外，这是一个XSS噩梦眼，如果允许浏览器任意访问文件系统资源，则存在严重的安全问题！！！。。。而这不是脚本所做的？它们有一个

和一个onchange。这在HTML5中是很可能的。@Katana314在这种情况下，用户需要使用对话框选择文件。如果没有客户端的手动干预，脚本无法选择某个文件并打开它。@Carcigenicate…在本例中，同样发生了这种情况。它们有一个可见的文件输入，用户从中选择一个图像，并在选择后运行脚本。OP不打算将其完全自动化。你需要更加注意这个问题。我在运行一些测试时在我的应用程序中生成了一个html报告，并且在测试过程中会进行一些屏幕打印。我只想将此html文件上载到带有嵌入式image init的远程服务器。@jayesh您想上载html文件吗？上传在哪里？一种更平滑的方法是使用数据URL将图像数据直接嵌入到HTML中，或者将其放置在HTML旁边的宿主位置。这听起来好像你的报告制作方式与问题非常相关。是的，我只想上传html文件，而不是图像文件，我可以将图像嵌入html页面。这些图像在我的应用程序中的特定位置，如何在jS方法中获取图像文件，以便转换为bse64字符串和embed@jayesh我不明白-看起来你已经拥有了所有这些。你到底想在你的HTML上传中嵌入什么；像“images/photos/3.jpg”这样的url，还是像这个HTML页面生成的数据url？如果您的图像托管在应用程序中，您可以通过URL轻松引用它们，而无需使用FileReader。如果可以将数据URL嵌入

标记中，那么也应该可以。但我不清楚你想自动显示的图像是如何出现的。