js 를 통 해 csv 파일 읽 기와 데이터 조작 실현
6129 단어 웹 기술 축적
졸업 을 앞 두 고 졸업 디자인 과 논문 을 완성 하 느 라 바 쁜 데다 회사 가 바 빠 블 로 그 를 쓰 지 못 한 지 오래다.이 시간 에 많은 문 제 를 만 나 하나씩 해결 하고 자신의 기술 이 많이 다 듬 어 진 것 을 느 꼈 습 니 다. 앞으로 계속 노력 해 야 합 니 다!바 쁜 와 중 에 틈 을 내 서 서둘러 블 로 그 를 써 서 자신의 진 보 를 기록 하 다.며칠 전 작업 중 에 사용자 가 올 린 파일 을 판단 하고 csv 형식의 파일 만 업로드 하고 읽 기 처리 한 다음 백 엔 드 에 보 낼 수 있 는 수 요 를 해결 합 니 다.초 반 에는 두서 가 없어 서 인터넷 에서 찾 아 보 니 자료 가 낡 지 않 으 면 매우 복잡 하 다 는 것 을 알 게 되 었 기 때문에 문 제 를 해결 한 후에 특별히 여기 서 정리 하 였 다.
디자인 사고 와 실현
HTML 부분
파일 읽 기 이 동작 은 HTML 이 어렵 지 않 습 니 다. 원본 탭 을 사용 하면 됩 니 다. (아래) 스타일 이 못 생 겼 다 고 생각 되면 플러그 인 을 사용 할 수 있 습 니 다. (boottstrap 과 element UI 의 input 스타일 이 충돌 하 는 것 을 주의 하 십시오) 자신 도 스타일 을 쓸 수 있 습 니 다.
<input id='file' type="file" onchange="upload(this)" />
Js 부분
파일 을 읽 는 중요 한 장면 은 당연히 js 부분 입 니 다. 먼저 Js 의 FileReader 대상 을 사용 해 야 합 니 다.FileReader 대상 은 웹 프로그램 이 사용자 컴퓨터 에 저 장 된 파일 (또는 원본 데이터 버퍼) 의 내용 을 바 이 너 리 코드, DataURL, 텍스트 로 읽 을 수 있 도록 합 니 다.주의해 야 할 것 은 텍스트 형식 으로 읽 을 때 파일 인 코딩 형식 은 UTF - 8 인 코딩 형식 이 어야 하 며 그렇지 않 으 면 오류 가 발생 할 수 있 습 니 다.
FileReader 대상 에 대한 상세 한 용법 은 여기 서 설명 을 많이 할 수 있 습 니 다. 여러분 은 구체 적 으로 링크 를 참고 하 실 수 있 습 니 다.http://www.cnblogs.com/LO-gin/p/6817319.html。저 는 FileReader 대상 의 readAsText 방법 (파일 을 텍스트 로 읽 기) 과 onload 이벤트 (파일 읽 기 가 완료 되 었 을 때 발생 하 는 이벤트) 만 사 용 했 습 니 다.구체 적 으로 다음 과 같다.
upload(input){
let file = input.files[0]; //
fileType = file.name.split('.'); // “.”
if(fileName[fileName - 1] != 'csv') { //
error(' ！'); // ，
return
}
let reader = new FileReader(); //new FileReader
reader.readAsText(file.raw); // csv
reader.onload = () => { //
let fileData = reader.result //
/*
*/
}
}
데이터 조작 부분
FileReader 대상 파일 을 읽 은 후에 받 은 데 이 터 는 문자열 형식 입 니 다. 저 는 보통 2 차원 배열 로 자 르 는 것 을 좋아 합 니 다. 이것 은 개인의 취향 을 보고 절단 코드 는 다음 과 같 습 니 다.
let fileData = reader.result //
fileData.split('
') //
fileData.split(',') //
좋은 웹페이지 즐겨찾기
