JQuery'deki dosya girişinden veri alın

136

Aslında bir dosya girdim var ve dosyanın Base64 verilerini almak istiyorum.

Denedim:

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

verileri almak için. Ancak yalnızca adı, uzunluğu, içerik türünü sağlar ancak verilerin kendisini sağlamaz.

Amazon S3'e göndermek için aslında bu verilere ihtiyacım var

API'yi zaten test ediyorum ve verileri kodlama türü "multipart / form-data" ile html formu aracılığıyla gönderdiğimde çalışıyor.

Bu eklentiyi kullanıyorum: http://jasny.github.com/bootstrap/javascript.html#fileupload

Ve bu eklentiler bana resmin bir önizlemesini veriyor ve verileri görüntü önizlemesinin src niteliğinde alıyorum. Ancak bu verileri S3'e gönderdiğimde çalışmıyor. Verileri "multipart / form-data" gibi kodlamam gerekebilir ama nedenini bilmiyorum.

Bu verileri html formu kullanmadan almanın bir yolu var mı?

— kschaeffler
kaynak

İçeriğe sahip olmak için bir şekilde (iframe, ajax, flash veya geleneksel biçimde) yüklemeniz gerekecek.

— Brad Christie

Dosya önce sunucuya yüklenmelidir.

— Sven van Zoelen

3

Tarayıcı yeni Dosya API'sini destekliyorsa zorunlu değildir (bkz. Html5rocks.com/en/tutorials/file/dndfiles )

— devnull69

Aslında jasny.github.com/bootstrap/javascript.html#fileupload bu eklentiyi kullanıyorum ve verilerin bir yerde olması için dosyanın bir önizlemesini alabilirim.

— kschaeffler

bu durumda "veri" sunucuda olacaktır. Verilere Javascript / jQuery aracılığıyla erişmeden önce istemciye (tarayıcıya) vermeniz

— gerekecek

134

FileReader API'yi deneyebilirsiniz. Bunun gibi bir şey yapın:

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

Snippet'i genişlet

— gömlek
kaynak

Hey, çözümünü denedim ve işe yaradı. Bilgiyi aldım ama iyi kodlanmamış. Bir dosya için, \xc3\xbf\xc3resmimin \xff\xd8\xffilk 3 karakteri için bu kodlamayı almak yerine alırım . Resmimin ikinci kodunu almak için ne kullanmalıyım?

— kschaeffler

@kschaeffler fr.readAsDataURL (dosya); Bu, Base64 verilerini okuyan işlevdir, ancak henüz test etmedim.

— Sark

aslında bu işlev bana yeterli veri vermiyor. jasny.github.com/bootstrap/javascript.html#fileupload eklentisinde kullandığım önizlemede zaten sahip olduğum şey bu.

— Aldığım

Aslında, html formu aracılığıyla "multipart / form-data" kodlama türü

— kschaeffler

157

girdi dosyası öğesi:

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

dosyayı al :

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

— Morilog
kaynak

12

Mükemmel çözüm! teşekkür ederim. Tekli yükleme için iyileştirme, dizin 0. var myFile = $ ('# fileinput'). Prop ('dosyalar') [0];

— polras

Mükemmel, form göndermeden betiğimi Cloudinary ile çalıştırdım. Sürükle, bırak, yükle :)

— Andy

Tam da ihtiyacım olan şey buydu.

— Amete Blessed

Mükemmel cevap !! daha sonra değişkeni$('.myClass').prop('files', myFile );

— her zaman-öğrenci

54

Bir form veri nesnesi oluşturdum ve dosyayı ekledim:

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

ve bende:

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

başlıklarda gönderildi. Bunun çalıştığını onaylayabilirim çünkü dosyam gönderilmiş ve sunucumdaki bir klasörde saklanmıştır. FormData nesnesini nasıl kullanacağınızı bilmiyorsanız, bazı çevrimiçi belgeler vardır, ancak çok fazla değildir. Mozilla'dan Form Veri Nesnesi Açıklaması

— mark.inman
kaynak

37

Html:

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

jQuery:

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

Sadece ilk öğeyi elde etmek istiyoruz çünkü prop ('files') dizi döndürür.

— cerbin
kaynak

16

input öğe türü file

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

Senin üzerinde inputdeğişiklik kullanmak FileReadernesneyi ve okunan inputdosya özelliği:

$('#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 dosyanızı yükleyecek ve fileReader.resultdosya verilerini Base64 biçiminde (ayrıca dosya içerik türü (MIME), metin / düz, resim / jpg vb.)

— Carlos B. Flores
kaynak

9

JQuery ile FileReader API, basit bir örnek.

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

Snippet'i genişlet

Metin olarak okumak için ... //fr.readAsText(file);yorum satırı ve yorumfr.readAsDataURL(file);

— shramee
kaynak

0

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

Dosya girişi adlı yukarıdaki dosyaları indirin, dizin sayfanızın yolunu ekleyin.

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