javascript - 将文件作为字符串上传到 JavaScript 变量

标签 javascript forms file-upload

客户端是否可以仅使用 JavaScript 将 HTML 格式(例如 .txt 或 .csv 格式)的文件作为字符串上传到 JavaScript 变量?如果是这样,你能提供一个简单的例子吗?我不想使用任何 PHP。

最佳答案

这是一个基于名为“myform”的表单的快速而肮脏的示例,该表单包含一个名为“myfile”的文件输入:

document.forms['myform'].elements['myfile'].onchange = function(evt) {
    if(!window.FileReader) return; // Browser is not compatible

    var reader = new FileReader();

    reader.onload = function(evt) {
        if(evt.target.readyState != 2) return;
        if(evt.target.error) {
            alert('Error while reading file');
            return;
        }

        filecontent = evt.target.result;

        document.forms['myform'].elements['text'].value = evt.target.result;
    };

    reader.readAsText(evt.target.files[0]);
};

这是关联的 HTML 表单:

<form id="myform">
  <p>
    <input id="myfile" name="files[]" multiple="" type="file" />
    <textarea id="text" rows="20" cols="40">nothing loaded</textarea>
  </p>
</form>

和一个jsfiddle进行演示。

关于javascript - 将文件作为字符串上传到 JavaScript 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14155310/

相关文章:

Javascript addEventListener 到动态按钮

c# - 脚本不在代码后面工作

javascript - jQuery 根据输入全是数字或只是字母来触发不同表单的提交

javascript - 为什么 React 在 onChange 上更新状态而不在 onSubmit (输入)上更新状态?

javascript - 是的, 'shape' 函数有什么作用?

ruby-on-rails-3 - 将文件版本动态添加到 Carrierwave uploader

javascript - Cloudinary - 直接删除、jquery文件上传、隐藏字段

javascript - 粘性导航栏出现奇怪的 JS 错误

JavaScript、图像更改程序无法运行

reactjs - React.js,如何将多部分/表单数据发送到服务器