Question

我正在创建一个小型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不是文件的路径，而是对象。如何获取文件的路径？有一个更好的方法吗？

Answer 1

您可以通过File API 读取文件，但无法保存。您可以创建包含要保存的文本的窗口，然后让用户保存它，但是在保存和加载时都会感到很痛苦。

幸运的是，对于你所说的，你不想要文件。

相反，请将颜色偏好设置存储在web storage中，特别是localStorage：

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

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

保存：

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

（上面的localStorage不是占位符或其他任何内容;它是支持本地存储的浏览器上的全球性存储，它几乎都是{{{{{{{ 3}}。）

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

Answer 2

假设您的文本文件是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

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

2 个答案: