Получить данные из ввода файла в 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?

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

         

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

  

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

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

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

 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

API FileReader с 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( $( '
' ).html( fr.result ) ) }; //fr.readAsText( file ); fr.readAsDataURL( file ); } else { // Handle errors here alert( "File not selected or browser incompatible." ) } } ); } )( jQuery );
    

Html:

  

JQuery:

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

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

элемент input , тип 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), текст / plain, image / jpg и т. Д.).

    

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

 
  • Почему по умолчанию stream файлов в C ++ имеет узкие письменные данные?
  • Рекурсивно перечислить все файлы в каталоге, используя nio.file.DirectoryStream;
  • Как я могу использовать синтаксис Bash в целевых файлах Makefile?
  • Вложенные с помощью операторов в C #
  • Запись файла на SDCard
  • Как читать / писать строки из файла на Android
  • Создать папку в Android
  • Переименуйте файл с помощью Java
  • Изменение существующего содержимого файла в Java
  • Как создать пустой текстовый файл из пакетного файла?
  • Каков наилучший способ создания уникального и короткого имени файла в Java
  • Давайте будем гением компьютера.