1

信頼できるユーザーがローカルCSVファイルをアップロードして、ユーザーが解析、検証、レビューした後、MySQLデータベースのさまざまなテーブルに挿入できるWebページを設定しようとしています。

サイトの残りの部分は、PHPとjQueryを使用して作成されています。CSVファイルをPHPに読み込んで、クエリを生成する方法を知っています。問題は、ファイルの検証と解析がインタラクティブであるということです。ユーザーは、データに関するさまざまな情報を求められ、ファイルの列をデータベースのフィールドと照合し、それらを確認および更新する機会を与える必要があります。すべてが正しいと確信するまで答えます。

ユーザーが何かを変更するたびにページ全体をリロードするのは1990年代のようです。そのため、クライアント側でAJAXを使用する方法だと思いましたが、「セキュリティ上の理由」から、ブラウザによってローカルファイルを開くことが特に妨げられているようです。 。

私の質問は：

実際にファイルをサーバーにアップロードする前に、ユーザーがファイルの内容に基づいて安全かつ効率的に決定できるようにするための一般的に受け入れられているパターンはありますか？それとも、そのような状況で人々は本当に何十ものPOSTリクエストを送信するだけですか？

ちなみに、私たちはWindowsやクローズドソースを使用していないため、残念ながら、ソリューションはInternetExplorerやActiveXに依存することはできません。

ありがとう。

4

4 に答える 4

6

Firefox3.6およびChrome7以降で利用可能なjavascriptFileReaderAPIを使用する場合は、サーバーにリクエストを送信する必要はありません。幸い、APIの動作を非常に明確に説明する非常に興味深い記事があります。

http://www.html5rocks.com/en/tutorials/file/dndfiles/

さまざまなブラウザでのAPIのサポートについて懸念がある場合は、この他の記事の最後に表示されます。

https://developer.mozilla.org/en/DOM/FileReader

私は最近、テキストファイルとバイナリファイルの両方をアップロードするためにこのAPIを使用したので、試してみたいと思って疑問がある場合は、遠慮なく私に連絡してください。

于 2012-04-04T22:00:16.903 に答える
1

これを効率的に行う方法の例については、PapaParseライブラリを試してください。

非常に大きなファイルを問題なく処理できます。

于 2014-05-20T10:25:53.610 に答える
0

ソリューションには、大きく分けて2つのクラスがあります。

  • CSVをアップロードし、サーバー側のロジックに依存して変換を実行し、場合によってはユーザーと対話します。これには、アップロード後に2番目の選択肢を実装するブラウザページの読み込みが含まれる場合があります。
  • ユーザーにファイルをコピーしてブラウザのテキストボックスに貼り付け、ブラウザベースのJavaScriptまたはアプレットを使用してテキストを変換します。おそらくローカルまたはWebサーバーと対話します。

どちらも、標準ベースの実装で実行できます。最も珍しいオプションは、ユーザーのコピー/貼り付けに依存する2番目の選択肢です。このため、ほとんどの実装では、最初のオプションのバリエーションを選択します。

ファイル変換の主なロジックをどこに置くかはあなた次第です。注意を払えば、これにセキュリティ上の問題がある必要はありません。

于 2012-04-04T21:50:18.877 に答える
0

HTML：

<form id = "emailform" action = "admincsvupload" role="form" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="sr-only" for="csvfile">Upload CSV</label>
<input type="file" name = "csvfile" class="form-control" id="csvfile" placeholder="Select CSV file">                 
</div>
<button type="button" class="btn btn-success" id="btnLoad">Load</button>
<button type="submit" class="btn btn-success" id="btnSubmit" style="display:none">Upload Now!</button>
</form>

0％

Javascript：

  // File load as HTMl n a table before actuly upload it on the server



    function updateProgress(evt) {
    // evt is an ProgressEvent.
    if (evt.lengthComputable) {
        var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
        // Increase the progress bar length.
        if (percentLoaded < 100) {
            progress.style.width = percentLoaded + '%';
            progress.textContent = percentLoaded + '%';
        }
    }
}

     function readBlob(opt_startByte, opt_stopByte) {
    var progress = document.querySelector('.percent');
    var files = document.getElementById('csvfile').files;
    if (!files.length) {
        alert('Please select a file!');
        return;
    }

    var file = files[0];
    var start = 0;
    var stop = file.size - 1;
    progress.style.width = '0%';
    progress.textContent = '0%';
    var reader = new FileReader();

    //Reader progress 
    reader.onprogress = updateProgress;

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function (evt) {
        if (evt.target.readyState == FileReader.DONE) { // DONE == 2
            var data = evt.target.result;
            var delimiter = ',';
            var escape = '\n';
            var rows = data.split(escape);
            var tbl = document.createElement('table');
            tbl.style.width = '100%';
            //tbl.setAttribute('border', '1', "green");
            tbl.className = "table table-hover table-condensed dataTable";
            var tbdy = document.createElement('tbody');

            for (index in rows) {
                var tr = document.createElement('tr'); // creating new row 
                var items = rows[index].split(delimiter);
                for (itemindex in items) {
                    var td = "";
                    if (index == 0) {
                        td = document.createElement('th');
                    } else {
                        td = document.createElement('td');
                    }

                    td.appendChild(document.createTextNode(items[itemindex])); // creating new cell 
                    tr.appendChild(td); // add to current tr
                }

                tbdy.appendChild(tr); // add new row (tr) to table 
            }
            tbl.appendChild(tbdy);

            document.getElementById('byte_content').innerHTML=tbl;

        }
    };

    // Progress Loading
    reader.onloadstart = function(e) {
      document.getElementById('progress_bar').className = 'loading';
    };


    reader.onload = function(e) {
      // Ensure that the progress bar displays 100% at the end.
      progress.style.width = '100%';
      progress.textContent = '100%';
      setTimeout("document.getElementById('progress_bar').className='';", 2000);
    }
    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);
    document.querySelector('#btnLoad').style.display = "none";
    document.getElementById("btnSubmit").style.display = "block";


}

//Change event if user select a new file.
document.querySelector('#csvfile').addEventListener('change', function (evt) {
        return readBlob();

}, false);
于 2014-02-20T09:25:57.140 に答える