Abrufen von Daten aus der Dateieingabe in JQuery

136

Ich habe tatsächlich eine Dateieingabe und möchte die Base64-Daten der Datei abrufen.

Ich habe es versucht:

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

um die Daten abzurufen. Es werden jedoch nur der Name, die Länge, der Inhaltstyp und nicht die Daten selbst angegeben.

Ich benötige diese Daten tatsächlich, um sie an Amazon S3 zu senden

Ich teste die API bereits und wenn ich die Daten über ein HTML-Formular mit dem Codierungstyp "Multipart / Formulardaten" sende, funktioniert es.

Ich benutze dieses Plugin: http://jasny.github.com/bootstrap/javascript.html#fileupload

Und diese Plugins geben mir eine Vorschau des Bildes und ich rufe Daten im src-Attribut der Bildvorschau ab. Aber wenn ich diese Daten an S3 sende, funktioniert es nicht. Ich muss die Daten möglicherweise wie "Multipart / Formulardaten" codieren, aber ich weiß nicht warum.

Gibt es eine Möglichkeit, diese Daten ohne Verwendung eines HTML-Formulars abzurufen?

— kschaeffler
quelle

Um Inhalte zu haben, müssen Sie diese auf irgendeine Weise hochladen (Iframe, Ajax, Flash oder traditionelle Form).

— Brad Christie

Die Datei muss zuerst auf den Server hochgeladen werden.

— Sven van Zoelen

3

Nicht unbedingt, wenn der Browser die neue Datei-API unterstützt (siehe html5rocks.com/en/tutorials/file/dndfiles )

— devnull69

Ich verwende dieses Plugin tatsächlich jasny.github.com/bootstrap/javascript.html#fileupload und kann eine Vorschau der Datei erhalten, damit sich die Daten irgendwo befinden.

— Kschaeffler

In diesem Fall befinden sich die "Daten" auf dem Server. Sie müssen die Daten an den Client (Browser) ausgeben, bevor Sie über Javascript / jQuery darauf

— zugreifen können

134

Sie können die FileReader-API ausprobieren. Mach so etwas:

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

Erweitern Sie das Snippet

— Sark
quelle

Hey, ich habe deine Lösung ausprobiert und das funktioniert. Ich habe die Informationen abgerufen, aber sie sind nicht gut codiert. Für eine Datei bekomme ich \xc3\xbf\xc3statt dieser Kodierung \xff\xd8\xffdie 3 ersten Zeichen meines Bildes. Was soll ich verwenden, um die zweite Codierung für mein Bild zu erhalten?

— Kschaeffler

@kschaeffler try fr.readAsDataURL (Datei); Dies ist eine Funktion zum Lesen von Base64-Daten, aber ich habe sie noch nicht getestet.

— Sark

Eigentlich gibt mir diese Funktion nicht genug Daten. Das habe ich bereits aus der Vorschau, die ich im Plugin jasny.github.com/bootstrap/javascript.html#fileupload verwende. Ich denke, dass die Daten, die ich

— abrufe,

Ich brauche tatsächlich die gleichen Codierungsdaten, die ich abrufe, wenn ich über ein HTML-Formular mit dem Codierungstyp "Multipart / Formulardaten"

— poste

154

Eingabedateielement:

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

eine Datei bekommen :

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

— Morilog
quelle

12

Perfekte Lösung! Danke. Verbesserung für Einzel-Upload, Index 0. var myFile = $ ('# fileinput'). Prop ('files') [0];

— Polras

Hervorragend, mein Skript funktioniert mit Cloudinary, ohne dass ich ein Formular einreichen muss. Drag, Drop, Upload :)

— Andy

Genau das brauchte ich.

— Amete gesegnet

Gute Antwort !! Sie können dann die Variable mit$('.myClass').prop('files', myFile );

— immer ein Lernender

53

Ich habe ein Formulardatenobjekt erstellt und die Datei angehängt:

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

und ich bekam:

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

in den Headern gesendet. Ich kann bestätigen, dass dies funktioniert, da meine Datei gesendet und in einem Ordner auf meinem Server gespeichert wurde. Wenn Sie nicht wissen, wie Sie das FormData-Objekt verwenden sollen, ist online eine Dokumentation vorhanden, aber nicht viel. Form Data Object Explination von Mozilla

— mark.inman
quelle

37

Html:

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

jQuery:

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

Wir möchten nur das erste Element erhalten, da prop ('files') ein Array zurückgibt.

— Cerbin
quelle

16

input Element vom Typ file

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

inputVerwenden Sie bei Ihrer Änderung das FileReaderObjekt und lesen Sie Ihre inputDateieigenschaft:

$('#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 lädt Ihre Datei und fileReader.resultSie haben die Dateidaten im Base64-Format (auch den Dateiinhaltstyp (MIME), Text / Plain, Image / JPG usw.).

— Carlos B. Flores
quelle

9

FileReader API mit jQuery, einfaches Beispiel.

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

Erweitern Sie das Snippet

Als Text lesen ... //fr.readAsText(file);Zeile und Kommentar auskommentierenfr.readAsDataURL(file);

— Shramee
quelle

0

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

Laden Sie die obigen Dateien mit dem Namen fileinput herunter und fügen Sie den Pfad auf Ihrer Indexseite hinzu.

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