Nhận dữ liệu từ đầu vào tệp trong JQuery

136

Tôi thực sự có một đầu vào tệp và tôi muốn lấy dữ liệu Base64 của tệp.

Tôi đã thử:

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

để lấy dữ liệu. Nhưng nó chỉ cung cấp tên, độ dài, loại nội dung chứ không phải chính dữ liệu.

Tôi thực sự cần những dữ liệu này để gửi chúng đến Amazon S3

Tôi đã kiểm tra API và khi tôi gửi dữ liệu qua biểu mẫu html với kiểu mã hóa "đa dữ liệu / biểu mẫu dữ liệu" thì nó hoạt động.

Tôi sử dụng plugin này: http://jasny.github.com/bootstrap/javascript.html#fileupload

Và các plugin này cung cấp cho tôi bản xem trước của hình ảnh và tôi truy xuất dữ liệu trong thuộc tính src của bản xem trước hình ảnh. Nhưng khi tôi gửi những dữ liệu này đến S3 thì nó không hoạt động. Tôi có thể cần phải mã hóa dữ liệu như "nhiều dữ liệu / biểu mẫu dữ liệu" nhưng tôi không biết tại sao.

Có cách nào để lấy lại những dữ liệu này mà không cần sử dụng biểu mẫu html không?

— kschaeffler
nguồn

Để có nội dung bạn cần tải lên theo cách nào đó (iframe, ajax, flash hoặc dạng truyền thống).

— Brad Christie

Các tập tin phải được tải lên máy chủ đầu tiên.

— Sven van Zoelen

3

Không nhất thiết, nếu trình duyệt hỗ trợ API tệp mới (xem html5rocks.com/en/tutorials/file/dndfiles )

— devnull69

Tôi thực sự đang sử dụng plugin này jasny.github.com/bootstrap/javascript.html#fileupload và tôi có thể xem trước tệp để dữ liệu ở đâu đó.

— kschaeffler

trong trường hợp đó, "dữ liệu" sẽ ở trên máy chủ. Bạn sẽ phải xuất dữ liệu cho máy khách (trình duyệt) trước khi bạn có thể truy cập dữ liệu đó qua Javascript / jQuery

— devnull69

134

Bạn có thể thử API FileReader. Làm một cái gì đó như thế này:

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

Mở rộng đoạn trích

— Sark
nguồn

Hey, tôi đã thử giải pháp của bạn và điều đó làm việc. Tôi đã lấy thông tin nhưng nó không được mã hóa tốt. Đối với một tệp tôi nhận được \xc3\xbf\xc3thay vì nhận mã hóa này \xff\xd8\xffcho 3 ký tự đầu tiên trong ảnh của tôi. Tôi nên sử dụng gì để có được mã hóa thứ hai cho hình ảnh của mình?

— kschaeffler

@kschaeffler thử fr.readAsDataURL (tệp); Đây là chức năng đọc dữ liệu Base64, nhưng tôi chưa kiểm tra nó.

— Sark

thực sự chức năng này cung cấp cho tôi không đủ dữ liệu. đó đã là những gì tôi có từ bản xem trước mà tôi sử dụng trong plugin jasny.github.com/bootstrap/javascript.html#fileupload. Tôi nghĩ rằng dữ liệu tôi truy xuất không được mã hóa Base64 và đây là vấn đề, nhưng tôi không chắc chắn

— kschaeffler

Tôi thực sự cần dữ liệu mã hóa tương tự mà tôi truy xuất khi tôi đăng qua biểu mẫu html với loại mã hóa "đa dữ liệu / biểu mẫu dữ liệu"

— kschaeffler

154

phần tử tập tin đầu vào:

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

có được file :

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

— Bộ ba
nguồn

12

Giải pháp hoàn hảo! cảm ơn bạn. Cải thiện cho tải lên đơn lẻ, chỉ mục 0. var myFile = $ ('# fileinput'). Prop ('files') [0];

— Polras

Tuyệt vời, có kịch bản của tôi làm việc với Cloudinary mà không phải gửi biểu mẫu. Kéo, thả, tải lên :)

— Andy

Đó chính xác là những gì tôi cần.

— Amete may mắn

Câu trả lời chính xác !! sau đó bạn có thể di chuyển biến với$('.myClass').prop('files', myFile );

— luôn luôn là người học

53

Tôi đã tạo một đối tượng dữ liệu biểu mẫu và nối thêm tệp:

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

và tôi đã nhận được:

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

trong tiêu đề gửi. Tôi có thể xác nhận điều này hoạt động vì tệp của tôi đã được gửi và lưu trữ trong một thư mục trên máy chủ của tôi. Nếu bạn không biết cách sử dụng đối tượng FormData, có một số tài liệu trực tuyến, nhưng không nhiều. Giải thích đối tượng dữ liệu biểu mẫu của Mozilla

— mark.inman
nguồn

37

Html:

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

jQuery:

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

Chúng tôi chỉ muốn lấy phần tử đầu tiên, vì prop ('files') trả về mảng.

— cerbin
nguồn

16

input yếu tố, loại file

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

Khi inputthay đổi, hãy sử dụng FileReaderđối tượng và đọc thuộc inputtính tệp của bạn :

$('#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 sẽ tải tệp của bạn và trong đó fileReader.resultbạn có dữ liệu tệp ở định dạng Base64 (cũng là loại nội dung tệp (MIME), văn bản / thuần túy, hình ảnh / jpg, v.v.)

— Carlos B. Flores
nguồn

9

API FileReader với jQuery, ví dụ đơn giản.

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

Mở rộng đoạn trích

Để đọc dưới dạng văn bản ... dòng chú thích //fr.readAsText(file);và bình luậnfr.readAsDataURL(file);

— nhường nhịn
nguồn

0

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

Tải xuống các tệp có tên fileinput thêm đường dẫn i trang chỉ mục của bạn.

<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
nguồn