從JQuery中的文件輸入中獲取數據


Answers

輸入文件元素:

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

獲取文件:

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

我其實有一個文件輸入,我想檢索文件的Base64數據。

我試過了:

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

檢索數據。 但它只提供名稱,長度,內容類型,但不提供數據本身。

實際上我需要這些數據將它們發送到Amazon S3

我已經測試了API,並且當我通過帶有編碼類型“multipart / form-data”的html格式發送數據時,它可以工作。

我使用這個插件: http://jasny.github.com/bootstrap/javascript.html#fileupload : http://jasny.github.com/bootstrap/javascript.html#fileupload

這個插件給了我一張圖片的預覽圖,並且在圖像預覽的src屬性中檢索數據。 但是,當我將這些數據發送到S3時,它不起作用。 我可能需要對數據進行編碼,比如“multipart / form-data”,但我不知道為什麼。

有沒有辦法在不使用html表單的情況下檢索這些數據?




FileReader API與jQuery,簡單的例子。

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

閱讀為文本...取消註釋//fr.readAsText(file); 行和註釋fr.readAsDataURL(file);




input元素, file類型

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

在你的input改變中使用FileReader對象並讀取你的input文件屬性:

$('#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將加載你的文件,並在fileReader.result你有文件數據的Base64格式(文件內容類型(MIME),文本/純文本,圖像/ JPG等)






Related