Pobierz dane z pliku wejściowego w JQuery

145

Właściwie mam plik wejściowy i chciałbym odzyskać dane Base64 pliku.

Próbowałem:

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

aby odzyskać dane. Ale podaje tylko nazwę, długość, typ zawartości, ale nie same dane.

Właściwie potrzebuję tych danych, aby wysłać je do Amazon S3

Testuję już API i kiedy wysyłam dane przez formularz html z kodowaniem typu „multipart / form-data” to działa.

Używam tej wtyczki: http://jasny.github.com/bootstrap/javascript.html#fileupload

A ta wtyczka daje mi podgląd obrazu i pobieram dane w atrybucie src podglądu obrazu. Ale kiedy wysyłam te dane do S3, to nie działa. Być może muszę zakodować dane, np. „Multipart / form-data”, ale nie wiem dlaczego.

Czy istnieje sposób na odzyskanie tych danych bez korzystania z formularza HTML?

jquery file file-upload base64 html-input kschaeffler
źródło
Aby mieć zawartość, musisz ją załadować w jakiś sposób (iframe, ajax, flash lub tradycyjna forma).
Brad Christie,
Plik należy najpierw przesłać na serwer.
Sven van Zoelen,
3
Niekoniecznie, jeśli przeglądarka obsługuje nowe API plików (patrz html5rocks.com/en/tutorials/file/dndfiles )
devnull69
Właściwie używam tej wtyczki jasny.github.com/bootstrap/javascript.html#fileupload i mogę uzyskać podgląd pliku, więc dane gdzieś są.
kschaeffler
w takim przypadku „dane” będą na serwerze. Będziesz musiał
wysłać

Odpowiedzi:

136

Możesz wypróbować interfejs API FileReader. Zrób coś takiego:

<!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>
Rozwiń fragment

Sark
źródło
Hej, wypróbowałem twoje rozwiązanie i to działa. Pobrałem informacje, ale nie są one dobrze zakodowane. W przypadku pliku otrzymuję \xc3\xbf\xc3zamiast tego kodowania \xff\xd8\xffdla 3 pierwszych znaków mojego obrazu. Czego powinienem użyć, aby uzyskać drugie kodowanie dla mojego obrazu?
kschaeffler
@kschaeffler try fr.readAsDataURL (plik); jest to funkcja odczytująca dane Base64, ale jeszcze jej nie testowałem.
Sark
w rzeczywistości ta funkcja daje mi za mało danych. to już mam z podglądu, którego używam we wtyczce jasny.github.com/bootstrap/javascript.html#fileupload. Myślę, że dane, które pobieram nie są zakodowane w Base64 i to jest problem, ale nie jestem pewien
kschaeffler
Właściwie potrzebuję tych samych danych kodowania, które pobieram, gdy
wysyłam
164

element pliku wejściowego:

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

dostać plik : 

var myFile = $('#fileinput').prop('files');
Morilog
źródło
14
Idealne rozwiązanie! Dziękuję Ci. Ulepszenie dla pojedynczego przesyłania, indeks 0. var myFile = $ ('# fileinput'). Prop ('files') [0];
polras
Świetnie, mój skrypt współpracuje z Cloudinary bez konieczności przesyłania formularza. Przeciągnij, upuść, prześlij :)
Andy
Właśnie tego potrzebowałem.
Amete Błogosławiony
Świetna odpowiedź !! następnie możesz przenieść zmienną za pomocą$('.myClass').prop('files', myFile );
always-a-learner
54

Utworzyłem obiekt danych formularza i dołączyłem plik:

var form = new FormData(); 
form.append("video", $("#fileInput")[0].files[0]);

i dostałem:

------WebKitFormBoundaryNczYRonipfsmaBOK
Content-Disposition: form-data; name="video"; filename="Wildlife.wmv"
Content-Type: video/x-ms-wmv

w wysłanych nagłówkach. Mogę potwierdzić, że to działa, ponieważ mój plik został wysłany i przechowywany w folderze na moim serwerze. Jeśli nie wiesz, jak korzystać z obiektu FormData, istnieje dokumentacja online, ale niewiele. Form Data Object Explination autorstwa Mozilli

mark.inman
źródło
41

HTML:

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

jQuery:

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

Chcemy uzyskać tylko pierwszy element, ponieważ prop ('files') zwraca tablicę.

cerbin
źródło
15

input element typu file 

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

Przy inputzmianie użyj FileReaderobiektu i przeczytaj inputwłaściwość pliku:

$('#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 załaduje twój plik i fileReader.resultbędziesz mieć dane pliku w formacie Base64 (także typ zawartości pliku (MIME), tekst / zwykły, obraz / jpg itp.)

Carlos B. Flores
źródło
10

FileReader API z jQuery, prosty przykład.

( 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>
Rozwiń fragment

Aby przeczytać jako tekst ... odkomentuj //fr.readAsText(file);linię i komentarzfr.readAsDataURL(file);

Shramee
źródło
0 
 <script src="~/fileupload/fileinput.min.js"></script>
 <link href="~/fileupload/fileinput.min.css" rel="stylesheet" />

Pobierz powyższe pliki o nazwie fileinput dodaj ścieżkę do swojej strony indeksu.

<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>
Amit Rana
źródło