[jquery] JQuery에서 파일 입력에서 데이터 가져 오기

실제로 파일 입력이 있고 파일의 Base64 데이터를 검색하고 싶습니다.

나는 시도했다 :

$('input#myInput')[0].files[0]

데이터를 검색합니다. 그러나 이름, 길이, 내용 유형 만 제공하지만 데이터 자체는 제공하지 않습니다.

Amazon S3로 전송하려면 실제로 이러한 데이터가 필요합니다.

이미 API를 테스트했으며 인코딩 형식이 “multipart / form-data”인 html 양식을 통해 데이터를 보낼 때 작동합니다.

이 플러그인을 사용합니다 : http://jasny.github.com/bootstrap/javascript.html#fileupload

그리고이 플러그인은 그림의 미리보기를 제공하며 이미지 미리보기의 src 속성에서 데이터를 검색합니다. 그러나이 데이터를 S3에 보내면 작동하지 않습니다. “multipart / form-data”와 같은 데이터를 인코딩해야 할 수도 있지만 이유를 모르겠습니다.

html 양식을 사용하지 않고 이러한 데이터를 검색하는 방법이 있습니까?

답변

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>

스 니펫 확장

답변

입력 파일 요소 :

<input type="file" id="fileinput" />

파일 받기 :

var myFile = $('#fileinput').prop('files');

답변

양식 데이터 객체를 만들고 파일을 추가했습니다.

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의 양식 데이터 오브젝트 설명

답변

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.result하고 파일 데이터는 Base64 형식 (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);

답변

 <script src="~/fileupload/fileinput.min.js"></script>
 <link href="~/fileupload/fileinput.min.css" rel="stylesheet" />

fileinput이라는 위의 파일을 다운로드하여 색인 페이지에 경로를 추가하십시오.

<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>