Получение данных из файла ввода в JQuery

Question

Получение данных из файла ввода в JQuery

на самом деле у меня есть файловый ввод, и я хотел бы получить данные Base64 файла.

пробовал:

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

для получения данных. Но он предоставляет только имя, длину, тип контента, но не сами данные.

Мне действительно нужны эти данные, чтобы отправить их в Amazon S3

Я уже тестирую API, и когда я отправляю данные через html-форму с типом кодирования "multipart/form-data", он работает.

Я использую этот плагин : http://jasny.github.com/bootstrap/javascript.html#fileupload

и этот плагин дает мне предварительный просмотр изображения, и я получаю данные в атрибуте src предварительного просмотра изображения. Но когда я отправляю эти данные в S3, это не работает. Возможно, мне нужно кодировать данные, такие как "multipart/form-data", но я не знаю, почему.

есть ли способ получить эти данные без использования html-формы?

822 7

jQuery file file-upload base64 html-input

7 ответов:

Comments

Ничего не найдено.

Sark · Accepted Answer · 2015-11-13 07:11:33

вы можете попробовать FileReader API что-то вроде этого.

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

    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 {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      //fr.readAsText(file);
      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>

Morilog · Accepted Answer · 2013-10-30 21:42:30

элемент входного файла:
<input type="file" id="fileinput" />
получите файл :
var myFile = $('#fileinput').prop('files');

mark.inman · Accepted Answer · 2013-10-23 17:28:35

Я создал объект данных формы и добавил файл:
var form = new FormData(); 
form.append("video", $("#fileInput")[0].files[0]);
и у меня есть:
------WebKitFormBoundaryNczYRonipfsmaBOK
Content-Disposition: form-data; name="video"; filename="Wildlife.wmv"
Content-Type: video/x-ms-wmv
в заголовках отправлено. Я могу подтвердить, что это работает, потому что мой файл был отправлен и сохранен в папке на моем сервере. Если вы не знаете, как использовать объект FormData, есть некоторая документация в интернете, но не так много. данные формы Explination компанией Mozilla

cerbin · Accepted Answer · 2017-09-21 00:14:48

Html:
<input type="file" name="input-file" id="input-file">
jQuery:
var fileToUpload = $('#input-file').prop('files')[0];
мы хотим получить только первый элемент, потому что prop ('files') возвращает массив.

shramee · Accepted Answer · 2016-09-27 13:58:32

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);

Carlos B. Flores · Accepted Answer · 2018-01-17 18:08:18

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 (также файл content-type (MIME), text/plain, image/jpg и т. д.)

Amit Rana · Accepted Answer · 2017-05-31 02:33:19

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

загрузка файлов по имени fileinput добавить путь я ваш классификационнаяа страница.

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