javascript - 如何使用javascript在浏览器中显示本地文件的内容(代码兼容所有浏览器)?

标签 javascript html

我打算在本地创建一个应用程序。我需要一个 javascript 代码来呈现我使用 html 文件上传输入框从我的系统中选择的任何文件的内容。引用下面的链接但是 http://www.alecjacobson.com/weblog/?p=1645代码与其他浏览器不兼容的地方,

提前致谢

最佳答案

出于安全原因,您无法从浏览器打开文件。您实际上可以做的是将其上传到服务器,然后将其写回页面。 要上传文件,我建议您使用 uploadify 或 jquery upload。

不客气。

如果您不关心跨浏览器支持,那么:

<input id="file" type="file" multiple="" onchange="startRead()">

<pre><code id="output"></code></pre>


function startRead() {
    //obtain input element through DOM  
    var file = document.getElementById('file').files[0];
    if (file) {
        getAsText(file);
    }
}
function getAsText(readFile) {
    var reader;
    try {
        reader = new FileReader();
    } catch (e) {
        document.getElementById('output').innerHTML = "Error: seems File API is not supported on your browser";
        return;
    }
    // Read file into memory as UTF-8      
    reader.readAsText(readFile, "UTF-8");
    // handle success and errors

    reader.onload = loaded;
    reader.onerror = errorHandler;
}

function loaded(evt) {
    // Obtain the read file data    
    var fileString = evt.target.result;
    document.getElementById('output').innerHTML = fileString;
}
function errorHandler(evt) {
    if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) {
        // The file could not be read
        document.getElementById('output').innerHTML = "Error reading file..."
    }
}

关于javascript - 如何使用javascript在浏览器中显示本地文件的内容(代码兼容所有浏览器)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13156925/

相关文章:

javascript - 禁用无状态组件中的按钮 - React

javascript - 如何避免编写 10 个函数,只编写一个

javascript - HTML/CSS - 如何使叠加视频文本完全响应?

html - 调整屏幕大小时更改图像

javascript - 添加Whatsapp功能到网站,如短信,电话

javascript - eclipse中如何添加JS资源?

javascript - 允许/白名单特定的单词/代码写入文本区域

javascript - 如果我忽略使用 double equal to(==),有什么影响吗?

javascript - 行复选框在 jQuery 数据表中不起作用

html - UIMarkupTextPrintFormatter 创建具有自定义背景和透明 HTML 内容的 PDF