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

136

실제로 파일 입력이 있고 파일의 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 양식을 사용하지 않고 이러한 데이터를 검색하는 방법이 있습니까?

— kschaeffler
소스

컨텐츠를 가지려면 어떤 방식으로 (iframe, ajax, flash 또는 전통적인 형식으로) 업로드해야합니다.

— 브래드 크리스티

먼저 파일을 서버에 업로드해야합니다.

— Sven van Zoelen

3

브라우저가 새로운 파일 API를 지원하는 경우 ( html5rocks.com/en/tutorials/file/dndfiles 참조 )

— devnull69

실제로이 플러그인 jasny.github.com/bootstrap/javascript.html#fileupload를 사용 하고 있으며 데이터가 어딘가에 있도록 파일 미리보기를 얻을 수 있습니다.

— kschaeffler

이 경우 "데이터"는 서버에 있습니다. 당신은 당신이 자바 스크립트 / jQuery를 통해 액세스 할 수 있습니다 출력 클라이언트 (브라우저)에 데이터를해야합니다

— devnull69

134

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>

스 니펫 확장

— 사크
소스

이봐, 나는 당신의 해결책을 시도해 보았습니다. 정보를 검색했지만 제대로 인코딩되지 않았습니다. 파일 \xc3\xbf\xc3의 경우이 \xff\xd8\xff그림을 내 그림의 첫 번째 3 문자로 인코딩하는 대신 얻을 수 있습니다. 사진의 두 번째 인코딩을 얻으려면 어떻게해야합니까?

— kschaeffler

@kschaeffler 시도 fr.readAsDataURL (파일); 이것은 Base64 데이터를 읽는 기능이지만 아직 테스트하지 않았습니다.

— Sark

실제로이 함수는 데이터가 충분하지 않습니다. 그것은 플러그인 jasny.github.com/bootstrap/javascript.html#fileupload에서 사용하는 미리보기에서 이미 가지고 있습니다. 검색 한 데이터가 Base64로 인코딩되지 않았으며 이것이 문제라고 생각하지만 확실하지 않습니다

— kschaeffler

실제로 "multipart / form-data"인코딩 유형으로 HTML 양식을 게시 할 때 검색 한 것과 동일한 인코딩 데이터가 필요합니다.

— kschaeffler

156

입력 파일 요소 :

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

파일 받기 :

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

— 모리 로그
소스

12

완벽한 솔루션! 감사합니다. 단일 업로드, 인덱스 0 개선. var myFile = $ ( '# fileinput'). prop ( 'files') [0];

— polras

훌륭합니다. 양식을 제출하지 않고도 스크립트를 Cloudinary와 함께 사용할 수 있습니다. 드래그 앤 드롭, 업로드 :)

— Andy

바로 내가 필요한 것입니다.

— Amete Blessed

좋은 대답 !! 당신은 다음과 변수를 이동할 수 있습니다$('.myClass').prop('files', myFile );

— 항상-A-학습자

54

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

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

— mark.inman
소스

37

HTML :

<input type="file" name="input-file" id="input-file">

jQuery :

var fileToUpload = $('#input-file').prop('files')[0];

prop ( 'files')가 배열을 반환하기 때문에 첫 번째 요소 만 가져오고 싶습니다.

— 세르 빈
소스

16

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 등)으로되어 있습니다.

— 카를로스 비 플로레스
소스

9

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

— 슈 라미
소스

0

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

— 라미 나
소스