ファイルをJavascriptでアップロードして処理するにはどうすればよいですか？

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で上記はプレースホルダではなく、ローカルストレージをサポートするブラウザ上に存在するグローバルです。 [ちょうどそれらのすべてについて] 2

ウェブストアの値は常に文字列です。 JSONは、複雑なものを格納する必要がある場合に使用できます。

Answer 2

つまり、あなたの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、テキストファイルは、JSON（文字列化形式）であると仮定すると： `localStorage`のサイズは遅いと限られていることを忘れないでくださいhttps://jsbin.com/weriguhato/edit?html,js,output