Отримати дані з введення файлів у 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-форми?

— kschaeffler
джерело

Для того, щоб мати вміст, вам потрібно буде завантажувати його якось (iframe, ajax, flash або традиційна форма).

— Бред Крісті

Файл потрібно спочатку завантажити на сервер.

— Sven van Zoelen

3

Не обов’язково, якщо браузер підтримує новий API API (див. Html5rocks.com/en/tutorials/file/dndfiles )

— devnull69

Я фактично використовую цей плагін jasny.github.com/bootstrap/javascript.html#fileupload, і я можу отримати попередній перегляд файлу, щоб дані були десь.

— kschaeffler

у такому випадку "дані" будуть на сервері. Вам доведеться вивести дані клієнту (браузеру), перш ніж ви зможете отримати доступ до нього через Javascript / jQuery

— devnull69

134

Ви можете спробувати API FileReader. Зробіть щось подібне:

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

Розгорніть фрагмент

— Сарк
джерело

Гей, я спробував ваше рішення, і це працює. Я отримав інформацію, але вона недостатньо закодована. Для файлу я отримую \xc3\xbf\xc3замість цього кодування \xff\xd8\xffдля трьох перших символів моєї картинки. Що я повинен використовувати, щоб отримати другий кодер для своєї картини?

— kschaeffler

@kschaeffler спробуйте fr.readAsDataURL (файл); це функція читання даних Base64, але я її ще не перевіряв.

— Сарк

насправді ця функція дає мені недостатньо даних. це вже те, що я маю з попереднього перегляду, який я використовую у плагіні jasny.github.com/bootstrap/javascript.html#fileupload. Я думаю, що дані, які я отримую, не закодовані Base64, і це проблема, але я не впевнений

— kschaeffler

Насправді мені потрібні ті самі дані кодування, які я отримую, коли публікую через html форму із типом кодування "multipart / form-data"

— kschaeffler

156

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

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

отримати файл:

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

— Морилог
джерело

12

Ідеальне рішення! спасибі. Поліпшення для одноразового завантаження, індекс 0. var myFile = $ ('# fileinput'). Prop ('файли') [0];

— polras

Чудово, що мій сценарій працював із Cloudinary без необхідності подавати форму. Перетягніть, опустіть, завантажте :)

— Енді,

Це саме те, що мені було потрібно.

— Благословенна Аметі

Чудова відповідь !! потім ви можете перемістити змінну з$('.myClass').prop('files', myFile );

— завжди

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') повертає масив.

— цербін
джерело

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

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( $( '<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);

— шраме
джерело

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>

— Аміт Рана
джерело