4

私は初心者のプログラマーで、構築中の Web サイト内のテキストエリアにローカル テキスト ファイルをアップロードする方法を理解するのに助けが必要です。私は HTML/CSS に非常に精通しており、Javascript/JQuery についても十分な知識があり、PHP を学んでいます。あなたが与えることができるどんな助けでも私は大いに感謝します. type="file" および name="file" の入力があり、".textbox" クラスのテキストエリアがあり、関数 "Upload()" を実行するボタンがあります。サイト。

var localfile = $("input[name=textfile]").val();

function Upload(){
  $(".textbox").append(file);
}

前もって感謝します！

4

2 に答える 2

3

FileReader を実装する最新のブラウザーは、これを行うことができます。ブラウザをテストするには、window.FileReader が定義されているかどうかを確認してください。

これを行うために数日前に書いたコードを次に示します。私の場合、ここでは panel.in1 として参照されている HTML 要素にファイルをドラッグするだけですが、使用することもできます (以下の参照を参照)。

if (window.FileReader) {
  function dragEvent (ev) {
    ev.stopPropagation (); 
    ev.preventDefault ();
    if (ev.type == 'drop') {
      var reader = new FileReader ();
      reader.onloadend = function (ev) { panel.in1.value += this.result; };
      reader.readAsText (ev.dataTransfer.files[0]);
    }  
  }

  panel.in1.addEventListener ('dragenter', dragEvent, false);
  panel.in1.addEventListener ('dragover', dragEvent, false);
  panel.in1.addEventListener ('drop', dragEvent, false);
}

イベントハンドラで復元​​したファイルのテキストをthis.resultとして取得するのがreader.onloadend関数です。

MDN からこれを行う方法に関するメカニズムのほとんどを取得しました: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

このコードは、ファイルの読み取りの基本を示しています。ファイル自体はテキスト領域にドラッグされます。これは、ファイルを選択するメカニズムを経由するよりも優れたインターフェイスだと思いますが、読み取るファイルを選択するために同様にうまく機能します。

これは、同様の質問に対する私の答えです: javascriptを使用してテキストファイルのコンテンツを取得する

于 2013-06-20T06:33:29.980 に答える