Dapatkan data dari input file di JQuery

136

Saya benar-benar memiliki input file dan saya ingin mengambil data Base64 dari file tersebut.

Saya mencoba:

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

untuk mengambil data. Tapi itu hanya memberikan nama, panjang, jenis konten tetapi bukan data itu sendiri.

Saya sebenarnya membutuhkan data ini untuk mengirimnya ke Amazon S3

Saya sudah menguji API dan ketika saya mengirim data melalui formulir html dengan tipe encode "multipart / form-data" berfungsi.

Saya menggunakan plugin ini: http://jasny.github.com/bootstrap/javascript.html#fileupload

Dan plugin ini memberi saya preview gambar dan saya mengambil data di atribut src dari preview gambar. Tetapi ketika saya mengirim data ini ke S3 tidak berfungsi. Saya mungkin perlu menyandikan data seperti "multipart / form-data" tetapi saya tidak tahu mengapa.

Apakah ada cara untuk mengambil data ini tanpa menggunakan formulir html?

jquery file file-upload base64 html-input kschaeffler
sumber
Untuk memiliki konten, Anda perlu mengunggahnya dengan cara tertentu (iframe, ajax, flash, atau bentuk tradisional).
Brad Christie
File harus diunggah ke server terlebih dahulu.
Sven van Zoelen
3
Belum tentu, jika browser mendukung File API baru (lihat html5rocks.com/en/tutorials/file/dndfiles )
devnull69
Saya sebenarnya menggunakan plugin ini jasny.github.com/bootstrap/javascript.html#fileupload dan saya bisa mendapatkan pratinjau file sehingga datanya ada di suatu tempat.
kschaeffler
dalam hal ini "data" akan berada di server. Anda harus menampilkan data ke klien (browser) sebelum Anda dapat mengaksesnya melalui Javascript / jQuery
devnull69

Jawaban:

134

Anda dapat mencoba FileReader API. Lakukan sesuatu seperti ini:

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

Sark
sumber
Hei, saya mencoba solusi Anda dan itu berhasil. Saya mengambil informasi tetapi tidak dikodekan dengan baik. Untuk file saya mendapatkan \xc3\xbf\xc3alih-alih mendapatkan encode ini \xff\xd8\xffuntuk 3 karakter pertama dari gambar saya. Apa yang harus saya gunakan untuk mendapatkan encode kedua untuk gambar saya?
kschaeffler
@kschaeffler coba fr.readAsDataURL (file); ini berfungsi membaca data Base64, tetapi saya belum mengujinya.
Sark
sebenarnya fungsi ini memberi saya tidak cukup data. itulah yang sudah saya miliki dari pratinjau yang saya gunakan di plugin jasny.github.com/bootstrap/javascript.html#fileupload. Saya berpikir bahwa data yang saya ambil tidak disandikan Base64 dan ini masalahnya, tapi saya tidak yakin
kschaeffler
Saya benar-benar membutuhkan data penyandian yang sama yang saya ambil ketika saya memposting melalui formulir html dengan tipe
penyandian
156

elemen file input:

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

dapatkan file: 

var myFile = $('#fileinput').prop('files');
Morilog
sumber
12
Solusi sempurna! Terima kasih. Peningkatan untuk unggahan tunggal, indeks 0. var myFile = $ ('# fileinput'). Prop ('file') [0];
Polras
Luar biasa, membuat skrip saya berfungsi dengan Cloudinary tanpa harus mengirimkan formulir. Seret, lepas, unggah :)
Andy
Itulah yang saya butuhkan.
Amete Blessed
Jawaban bagus !! Anda kemudian dapat memindahkan variabel dengan$('.myClass').prop('files', myFile );
always-a-learner
54

Saya membuat objek data formulir dan menambahkan file:

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

dan saya mendapat:

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

di header dikirim. Saya dapat mengkonfirmasi ini berfungsi karena file saya dikirim dan disimpan dalam folder di server saya. Jika Anda tidak tahu cara menggunakan objek FormData ada beberapa dokumentasi online, tetapi tidak banyak. Formulir Eksplorasi Objek Data oleh Mozilla

Mark.inman
sumber
37

Html:

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

jQuery:

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

Kami ingin mendapatkan elemen pertama saja, karena prop ('file') mengembalikan array.

cerbin
sumber
16

input elemen, tipe file 

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

Pada inputperubahan Anda gunakan FileReaderobjek dan baca inputproperti file Anda :

$('#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 akan memuat file Anda dan fileReader.resultAnda memiliki data file dalam format Base64 (juga tipe konten file (MIME), teks / polos, gambar / jpg, dll)

Carlos B. Flores
sumber
9

API FileReader dengan jQuery, contoh sederhana.

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

Untuk membaca sebagai teks ... batalkan komentar //fr.readAsText(file);baris dan komentarfr.readAsDataURL(file);

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

Unduh file di atas bernama fileinput, tambahkan path ke halaman indeks Anda.

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