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

136

У меня действительно есть ввод файла, и я хотел бы получить данные файла 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-формы?

jquery file file-upload base64 html-input kschaeffler
источник
Чтобы иметь содержимое, вам нужно будет загрузить его каким-либо образом (iframe, ajax, flash или в традиционной форме).
Брэд Кристи
Файл должен быть сначала загружен на сервер.
Sven van Zoelen 05
3
Не обязательно, если браузер поддерживает новый File API (см. Html5rocks.com/en/tutorials/file/dndfiles )
devnull69
На самом деле я использую этот плагин jasny.github.com/bootstrap/javascript.html#fileupload, и я могу получить предварительный просмотр файла, чтобы данные были где-то.
kschaeffler 05
в этом случае «данные» будут на сервере. Вам нужно будет вывести данные клиенту (браузеру), прежде чем вы сможете получить к ним доступ через Javascript / jQuery
devnull69

Ответы:

134

Вы можете попробовать 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;
        }   
      
        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>
Развернуть фрагмент

Sark
источник
Эй, я попробовал твое решение, и оно работает. Я получил информацию, но она плохо закодирована. Для файла я \xc3\xbf\xc3получаю этот код вместо \xff\xd8\xffтрех первых символов моего изображения. Что мне следует использовать, чтобы получить второй код для моего изображения?
kschaeffler
@kschaeffler попробуйте fr.readAsDataURL (файл); это функция чтения данных Base64, но я ее еще не тестировал.
Sark
на самом деле эта функция дает мне недостаточно данных. это уже то, что у меня есть из предварительного просмотра, который я использую в плагине jasny.github.com/bootstrap/javascript.html#fileupload. Я думаю, что данные, которые я получаю, не закодированы в Base64, и это проблема, но я не уверен
kschaeffler 06
Мне действительно нужны те же данные кодирования, которые я получаю, когда отправляю через HTML-форму с типом кодирования "multipart / form-data"
kschaeffler
156

элемент входного файла:

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

получить файл : 

var myFile = $('#fileinput').prop('files');
Morilog
источник
12
Идеальное решение! Спасибо. Улучшение для одиночной загрузки, индекс 0. var myFile = $ ('# fileinput'). Prop ('files') [0];
Polras
Отлично, мой скрипт работает с Cloudinary без необходимости отправлять форму. Перетащите, бросьте, загрузите :)
Энди
Это именно то, что мне было нужно.
Amete Blessed
Отличный ответ !! затем вы можете переместить переменную с помощью$('.myClass').prop('files', myFile );
always-a-Learner
54

Я создал объект данных формы и добавил файл:

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, в Интернете есть документация, но ее немного. Описание объекта данных формы от Mozilla

mark.inman
источник
37

Html:

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

JQuery:

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

Мы хотим получить только первый элемент, потому что prop ('files') возвращает массив.

cerbin
источник
16

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 и т. Д.)

Карлос Б. Флорес
источник
9

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

shramee
источник
0 
 <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>
Амит Рана
источник