업로드한 파일의 데이터를 javascript로 가져옵니다.
csv 파일을 업로드하여 그 파일 내의 데이터를 처리하고 싶습니다.그렇게 하는 가장 좋은 방법은 무엇일까요?저는 php 스크립트를 사용하지 않는 것을 선호합니다.저는 다음 단계를 수행했습니다.그러나 이 메서드는 파일 경로 대신 파일 이름만 반환합니다.그래서 나는 원하는 결과를 얻지 못했다.
<form id='importPfForm'>
<input type='file' name='datafile' size='20'>
<input type='button' value='IMPORT' onclick='importPortfolioFunction()'/>
</form>
function importPortfolioFunction( arg ) {
var f = document.getElementById( 'importPfForm' );
var fileName= f.datafile.value;
}
그럼 어떻게 하면 그 파일에 데이터를 넣을 수 있을까요?
다음 예시는 html5rocks 솔루션을 기반으로 합니다.브라우저의 FileReader() 함수를 사용합니다.최신 브라우저만.
http://www.html5rocks.com/en/tutorials/file/dndfiles/ #toc-reading-files 참조
HTML을 사용합니다.은 에에 the the the에 표시됩니다.<textarea>.
<form enctype="multipart/form-data">
<input id="upload" type=file accept="text/html" name="files[]" size=30>
</form>
<textarea class="form-control" rows=35 cols=120 id="ms_word_filtered_html"></textarea>
<script>
function handleFileSelect(evt) {
let files = evt.target.files; // FileList object
// use the 1st file from the list
let f = files[0];
let reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
jQuery( '#ms_word_filtered_html' ).val( e.target.result );
};
})(f);
// Read in the image file as a data URL.
reader.readAsText(f);
}
document.getElementById('upload').addEventListener('change', handleFileSelect, false);
</script>
새로운 HTML 5 파일 api를 사용하여 파일 내용을 읽을 수 있습니다.
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
그러나 모든 브라우저에서 동작하는 것은 아니기 때문에 서버 측의 폴백이 필요할 수 있습니다.
는 기본 .FileReader업로드된 파일의 내용을 읽습니다.이 예의 동작하는 플런커는 다음과 같습니다.
function init() {
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
}
function handleFileSelect(event) {
const reader = new FileReader()
reader.onload = handleFileLoad;
reader.readAsText(event.target.files[0])
}
function handleFileLoad(event) {
console.log(event);
document.getElementById('fileContent').textContent = event.target.result;
}<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body onload="init()">
<input id="fileInput" type="file" name="file" />
<pre id="fileContent"></pre>
</body>
</html>BLOB 자체에는 레거시 FileReader를 사용하지 않아도 되는 약속으로 파일 내용을 읽을 수 있는 몇 가지 새로운 도구가 있습니다.
// What you need to listen for on the file input
function fileInputChange (evt) {
for (let file of evt.target.files) {
read(file)
}
}
async function read(file) {
// Read the file as text
console.log(await file.text())
// Read the file as ArrayBuffer to handle binary data
console.log(new Uint8Array(await file.arrayBuffer()))
// Abuse response to read json data
console.log(await new Response(file).json())
// Read large data chunk by chunk
console.log(file.stream())
}
read(new File(['{"data": "abc"}'], 'sample.json'))시험해 보다
document.getElementById('myfile').addEventListener('change', function() {
var GetFile = new FileReader();
GetFile .onload=function(){
// DO Somthing
document.getElementById('output').value= GetFile.result;
}
GetFile.readAsText(this.files[0]);
}) <input type="file" id="myfile">
<textarea id="output" rows="4" cols="50"></textarea>파일 리더JS가 파일을 읽을 수 있습니다.파일 내용이 안에 있습니다.onLoad(e)로서 「」를 지정합니다.e.target.result.
언급URL : https://stackoverflow.com/questions/16505333/get-the-data-of-uploaded-file-in-javascript
'programing' 카테고리의 다른 글
| python에서 json 배열을 필터링하는 방법 (0) | 2023.03.25 |
|---|---|
| AngularJS: $리소스(솔루션)를 사용하여 파일 업로드 (0) | 2023.03.25 |
| 컬렉션을 포함한 Backbone.js 모델 (0) | 2023.03.20 |
| 임베디드 넷티 서버가 spring-boot-starter-webflux로 시작되지 않도록 하려면 어떻게 해야 합니까? (0) | 2023.03.20 |
| Wordpress 이미지 업로드 시간 오류: 이미지 후 처리에 실패했습니다. (0) | 2023.03.20 |