AJAX를 사용하여 대용량 CSV 파일을 업로드하는 방법은 무엇입니까?

많은 수의 CSV 파일이 있습니다. 이 파일을 웹 인터페이스를 사용하여 MySQL 데이터베이스에 업로드해야합니다. 이 파일들은 다른 현장 작업에서 수집되어 웹 응용 프로그램을 통해 서버에 업로드됩니다. 웹 응용 프로그램은 PHP를 사용하여 개발되었습니다.AJAX를 사용하여 대용량 CSV 파일을 업로드하는 방법은 무엇입니까?

처음에는 레코드 수가 매우 적습니다. 그러나 이제는 파일 크기가 커지고 사용자가 파일을 서버에 업로드 할 수 없습니다.

문제 -

우리는 처리를 시작 업로드 전체 파일을 기다려야한다.
전체 파일을 업로드 한 후 데이터 유효성 검사 오류가 표시됩니다.
대용량 파일 업로드는 기본적으로 지원되지 않습니다.
PHP 실행 시간이 제한됩니다.

그래서 저는 청크로 CSV 파일 콘텐츠를 업로드 할 수있는 솔루션을 찾고 있습니다. 요청 당 적은 양의 데이터를 처리하는 데 도움이됩니다.

제 생각에는 JavaScript를 사용하여 CSV 파일에서 데이터를 읽는 것입니다. 그런 다음이 데이터를 AJAX를 사용하여 POST하십시오.

소량의 데이터에 대한 데이터 유효성 검사 오류를보고 필요하면 실행을 중지하고 싶습니다.

출처

2016-11-01 Avik Das

웹에서 일부 조사를 한 후에 HTML5 JavaScript File API가 로컬 파일 시스템의 내용을 읽는 데 매우 유용하다는 사실을 발견했습니다. 작은 스크립트를 작성했으며 완벽하게 작동합니다.

이 예를 들어

, 나는 두 개의 파일이 생성 한 -

index.htm으로
service.php

의 index.htm을

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <title>Upload large CSV file</title> 
 
\t \t <style> 
 
\t \t \t body{font-size:8pt; color:#333} 
 
\t \t \t #wrap{width:500px; margin:5px auto} 
 
\t \t \t #responce{height:200px; overflow-y:scroll; border:1px solid #ddd;} 
 
\t \t </style> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <div id="wrap"> 
 
\t \t \t <ul id="responce"> 
 
\t \t \t \t 
 
\t \t \t </ul><!-- // response --> 
 
\t \t \t 
 
\t \t \t <input type="file" id="fileSelected"/> 
 
\t \t \t <button id="btnUpload">Upload</button> 
 
\t \t </div><!-- // wrap --> 
 
\t \t 
 
\t \t <script 
 
\t \t \t src="https://code.jquery.com/jquery-3.1.1.min.js" 
 
\t \t \t integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
 
\t \t \t crossorigin="anonymous"></script> 
 
\t \t <script> 
 
\t \t \t var reader_offset = 0; \t \t //current reader offset position 
 
\t \t \t var buffer_size = 1024; \t \t // 
 
\t \t \t var pending_content = ''; 
 
\t \t \t 
 
\t \t \t /** 
 
\t \t \t * Read a chunk of data from current offset. 
 
\t \t \t */ 
 
\t \t \t function readAndSendChunk() 
 
\t \t \t { 
 
\t \t \t \t var reader = new FileReader(); 
 
\t \t \t \t var file = $('#fileSelected')[0].files[0]; 
 
\t \t \t \t reader.onloadend = function(evt){ 
 
\t \t \t \t \t 
 
\t \t \t \t \t //check for end of file 
 
\t \t \t \t \t if(evt.loaded == 0) return; 
 
\t \t \t \t \t 
 
\t \t \t \t \t //increse offset value 
 
\t \t \t \t \t reader_offset += evt.loaded; 
 
\t \t \t \t \t 
 
\t \t \t \t \t //check for only complete line 
 
\t \t \t \t \t var last_line_end = evt.target.result.lastIndexOf('\n'); 
 
\t \t \t \t \t var content = pending_content + evt.target.result.substring(0, last_line_end); 
 
\t \t \t \t \t 
 
\t \t \t \t \t pending_content = evt.target.result.substring(last_line_end+1, evt.target.result.length); 
 
\t \t \t \t \t 
 
\t \t \t \t \t //upload data 
 
\t \t \t \t \t send(content); 
 
\t \t \t \t }; 
 
\t \t \t \t var blob = file.slice(reader_offset, reader_offset + buffer_size); 
 
\t \t \t \t reader.readAsText(blob); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t /** 
 
\t \t \t * Send data to server using AJAX 
 
\t \t \t */ 
 
\t \t \t function send(data_chank) 
 
\t \t \t { 
 
\t \t \t \t $.ajax({ 
 
\t \t \t \t \t url: "service.php", 
 
\t \t \t \t \t method: 'POST', 
 
\t \t \t \t \t data: data_chank 
 
\t \t \t \t }).done(function(response) { 
 
\t \t \t \t 
 
\t \t \t \t \t //show responce message received from server 
 
\t \t \t \t \t $('#responce').append('<li>' + response + '</li>'); 
 
\t \t \t \t \t 
 
\t \t \t \t \t //try for next chank 
 
\t \t \t \t \t readAndSendChunk(); 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t /** 
 
\t \t \t * On page load 
 
\t \t \t */ 
 
\t \t \t $(function(){ 
 
\t \t \t \t $('#btnUpload').click(function(){ 
 
\t \t \t \t \t reader_offset = 0; 
 
\t \t \t \t \t pending_content = ''; 
 
\t \t \t \t \t readAndSendChunk(); 
 
\t \t \t \t }); 
 
\t \t \t }); 
 
\t \t </script> 
 
\t </body> 
 
</html>

service.php

<?php 
$content = file_get_contents('php://input'); 
$lines = explode("\n", $content); 
foreach($lines as $line){ 
    $csv_row = str_getcsv($line); 
    //save data into database 
    //---- 
}

출처

2016-11-01 19:15:03

AJAX를 사용하여 대용량 CSV 파일을 업로드하는 방법은 무엇입니까?

답변

관련 문제