如何在 Javascript 中上传和处理文件

How do I upload and process a file in Javascript?

本文关键字：处理 文件 Javascript      更新时间：2023-09-26

我正在创建一个小型html5应用程序，允许用户更改某些元素的颜色属性。我想为用户提供保存更改的选项，然后在以后（无需注册）上传它们。为此，我添加了一个按钮来生成其属性的文本文件，我想添加一个允许他们上传文件的按钮，我创建了一个文件选择器对话框， 

<label>  
  <input class="button" 
         type="file" 
         name="input-name" 
         style="display:none;" 
         onchange="read(event)"/>
  <span id="input-file" >Select File</span>
</label>

但是我不知道如何在javascript中打开此文件并处理其内容。我知道这应该与此相似

function read(evt){
    var file = document.getElementById("input-file");
    //checking for file reader
    if (window.File && window.FileReader && window.FileList && window.Blob){
        var r = new FileReader();
        r.readAsText(file);
    } else{
        alert("Browser not supported");
    }
}

但这不起作用file因为上面的不是文件的路径，而是对象。如何获取文件的路径？有没有更好的方法可以做到这一点？

可以通过文件

API 读取文件，但无法保存它们。您可以创建包含要保存的文本的窗口，然后让用户保存它，但在保存和加载时都是一种痛苦。

幸运的是，对于您所说的内容，您不想要文件。

相反，将颜色首选项存储在 Web 存储中，特别是localStorage：

加载

（例如，在页面加载时或任何时候）：

var savedColor = localStorage.getItem("saved-color");
if (savedColor == null) {
    // There wasn't one, use a default
}

储蓄：

localStorage.setItem("saved-color", savedColor);

（上面localStorage不是占位符或任何东西;它是支持本地存储的浏览器上存在的全局浏览器，这是[几乎所有浏览器2]。

Web 存储值始终为字符串。如果需要存储复杂的东西，可以使用 JSON。

假设您的文本文件是JSON（字符串格式），即您的file.txt包含{"primary":"green","secondary":"#FF0000"} 

<input type="file" id="file-picker" accept="text/plain" />
/*
 Assuming JSON format in the text file - e.g:
 var colors = {
     primary: 'green',
     secondary: '#FF0000'
  }
  JSON.stringify(colors);
  output: '{"primary":"green","secondary":"#FF0000"}'
*/
var fileInput = document.querySelector('#file-picker');
function readFileJSON(file) {
  return new Promise(function(resolve) {
    var reader = new FileReader();
    reader.onload = function(e) {
        try {
          resolve(JSON.parse(e.target.result));
        } catch(ex) {
          throw ex;
        }
    };
    reader.readAsText(file);
  });
}
fileInput.addEventListener('change', function(e) {
    var file = e.target.files.item(0);
    if (!file) {
        return;
    }
    readFileJSON(file).then(function(colors) {
       console.log('Colors:', colors);
    });
});

JSBIN： https://jsbin.com/weriguhato/edit?html,js,output

相关文章：