반응형
JQuery의 파일 입력에서 데이터 가져오기
저는 사실 파일 입력이 있고 파일의 Base64 데이터를 검색하고 싶습니다.
노력했습니다.
$('input#myInput')[0].files[0]
데이터를 검색합니다.그러나 이름, 길이, 콘텐츠 유형만 제공할 뿐 데이터 자체는 제공하지 않습니다.
사실 아마존 S3로 보내기 위해 이 데이터가 필요합니다.
저는 이미 API를 테스트하고 있으며 인코딩 유형 "multipart/form-data"로 html 형식으로 데이터를 전송하면 작동합니다.
이 플러그인을 사용합니다. http://jasny.github.com/bootstrap/javascript.html#fileupload
그리고 이 플러그인은 사진의 미리보기를 제공하고 이미지 미리보기의 src 속성에 있는 데이터를 검색합니다.하지만 S3로 데이터를 보내도 작동하지 않습니다."다중 부품/폼 데이터"와 같은 데이터를 인코딩해야 할 수도 있지만 이유를 모르겠습니다.
html 형식을 사용하지 않고 이러한 데이터를 검색할 수 있는 방법이 있습니까?
입력 파일 요소:
<input type="file" id="fileinput" />
파일 가져오기:
var myFile = $('#fileinput').prop('files');
FileReader API를 사용해 볼 수 있습니다.다음과 같은 작업을 수행합니다.
<!DOCTYPE html>
<html>
<head>
<script>
function handleFileSelect()
{
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('The File APIs are not fully supported in this browser.');
return;
}
var input = document.getElementById('fileinput');
if (!input) {
alert("Um, couldn't find the fileinput element.");
}
else if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
}
else {
var file = input.files[0];
var fr = new FileReader();
fr.onload = receivedText;
//fr.readAsText(file);
//fr.readAsBinaryString(file); //as bit work with base64 for example upload to server
fr.readAsDataURL(file);
}
}
function receivedText() {
document.getElementById('editor').appendChild(document.createTextNode(fr.result));
}
</script>
</head>
<body>
<input type="file" id="fileinput"/>
<input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();' />
<div id="editor"></div>
</body>
</html>양식 데이터 개체를 만들고 파일을 추가했습니다.
var form = new FormData();
form.append("video", $("#fileInput")[0].files[0]);
그리고 나는 받았습니다:
------WebKitFormBoundaryNczYRonipfsmaBOK
Content-Disposition: form-data; name="video"; filename="Wildlife.wmv"
Content-Type: video/x-ms-wmv
전송된 헤더에 있습니다.내 파일이 서버의 폴더로 전송되어 저장되었기 때문에 이것이 작동하는지 확인할 수 있습니다.FormData 개체를 사용하는 방법을 모르는 경우 온라인에 설명서가 있지만 많지는 않습니다.Mozilla에 의한 Form Data 객체 설명
HTML:
<input type="file" name="input-file" id="input-file">
jQuery:
var fileToUpload = $('#input-file').prop('files')[0];
prop('files')가 배열을 반환하기 때문에 첫 번째 요소만 가져오려고 합니다.
input요소, 유형file
<input id="fileInput" type="file" />
당신의input변경 사용FileReader반대하고 당신의 것을 읽으세요.input파일 속성:
$('#fileInput').on('change', function () {
var fileReader = new FileReader();
fileReader.onload = function () {
var data = fileReader.result; // data <-- in this var you have the file data in Base64 format
};
fileReader.readAsDataURL($('#fileInput').prop('files')[0]);
});
FileReader는 당신의 파일을 로드할 것이고,fileReader.resultBase64 형식(파일 내용 유형(MIME), 텍스트/일반, 이미지/jpg 등)의 파일 데이터가 있습니다.
jQuery를 사용한 FileReader API의 간단한 예입니다.
( function ( $ ) {
// Add click event handler to button
$( '#load-file' ).click( function () {
if ( ! window.FileReader ) {
return alert( 'FileReader API is not supported by your browser.' );
}
var $i = $( '#file' ), // Put file input ID here
input = $i[0]; // Getting the element from jQuery
if ( input.files && input.files[0] ) {
file = input.files[0]; // The file
fr = new FileReader(); // FileReader instance
fr.onload = function () {
// Do stuff on onload, use fr.result for contents of file
$( '#file-content' ).append( $( '<div/>' ).html( fr.result ) )
};
//fr.readAsText( file );
fr.readAsDataURL( file );
} else {
// Handle errors here
alert( "File not selected or browser incompatible." )
}
} );
} )( jQuery );<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" />
<input type='button' id='load-file' value='Load'>
<div id="file-content"></div>텍스트로 읽는 방법...언코멘트//fr.readAsText(file);대사와 논평fr.readAsDataURL(file);
jquery를 사용하여 파일 가져오기
요소 html:
<input id="fileInput" type="file" />
jquery 코드:
$("#fileInput")[0].files[0]
나를 위한 이 일 :)
HTML
<div class="row form-group my-2">
<div class="col-12">
<div class="">
<div class="text-center">
<label for="inpImage" class="m-2 pointer">
<img src="src/img/no-image.jpg" id="img-visor" height="120" class="rounded mx-auto d-block">
</label>
<input type="file" class="visually-hidden" accept="image/*" name="picture" id="inpImage">
</div>
</div>
</div>
</div>
jQuery
$('#inpImage').change(()=>{
const file = $('#inpImage').prop("files")[0];
const imagen = URL.createObjectURL(file);
console.log(URL.createObjectURL(file));
$('#img-visor').attr('src', imagen);
});
<script src="~/fileupload/fileinput.min.js"></script>
<link href="~/fileupload/fileinput.min.css" rel="stylesheet" />
파일 입력이라는 이름의 파일을 다운로드하면 인덱스 페이지에 경로가 추가됩니다.
<div class="col-sm-9 col-lg-5" style="margin: 0 0 0 8px;">
<input id="uploadFile1" name="file" type="file" class="file-loading"
`enter code here`accept=".pdf" multiple>
</div>
<script>
$("#uploadFile1").fileinput({
autoReplace: true,
maxFileCount: 5
});
</script>
<!DOCTYPE html>
<html>
<head>
<script>
function handleFileSelect()
{
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('The File APIs are not fully supported in this browser.');
return;
}
var input = document.getElementById('fileinput');
if (!input) {
alert("Um, couldn't find the fileinput element.");
}
else if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
}
else {
var file = input.files[0];
var fr = new FileReader();
fr.onload = receivedText;
//fr.readAsText(file);
//fr.readAsBinaryString(file); //as bit work with base64 for example upload to server
fr.readAsDataURL(file);
}
}
function receivedText() {
document.getElementById('editor').appendChild(document.createTextNode(fr.result));
}
</script>
</head>
<body>
<input type="file" id="fileinput"/>
<input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();' />
<div id="editor"></div>
</body>
</html>언급URL : https://stackoverflow.com/questions/12281775/get-data-from-file-input-in-jquery
반응형
'programing' 카테고리의 다른 글
| 조각에 빈 생성자가 정말 필요합니까? (0) | 2023.07.30 |
|---|---|
| c#을 사용하여 asp.net 의 쿼리 문자열에서 항목을 제거하려면 어떻게 해야 합니까? (0) | 2023.07.30 |
| java System.currentTimeMillis()에 해당하는 Oracle? (0) | 2023.07.30 |
| "식 유형이 잘못됨"에서 부울 반환 함수가 실패함 (0) | 2023.07.30 |
| 운영 환경에서 MemoryStore 사용 (0) | 2023.07.30 |