Pobieranie danych z pliku wprowadzanego w JQuery
Mam dane wejściowe do pliku i chciałbym odzyskać dane Base64 z pliku.
Próbowałem:
$('input#myInput')[0].files[0]
Aby odzyskać dane. Ale podaje tylko nazwę, długość, typ zawartości, ale nie same dane.
Potrzebuję tych danych, aby wysłać je do Amazon S3
Już testuję API i kiedy wysyłam dane przez formularz html z kodem typu "multipart / form-data" to działa.
Używam tej wtyczki : http://jasny.github.com/bootstrap/javascript.html#fileupload
A Ta wtyczka daje mi podgląd obrazu i pobieram dane z atrybutu src podglądu obrazu. Ale kiedy wysyłam te dane do S3 to nie działa. Może muszę zakodować dane w stylu "multipart/form-data", ale nie wiem dlaczego.
Czy istnieje sposób na odzyskanie tych danych bez użycia formularza html?
7 answers
Możesz spróbować FileReader API coś takiego.
<!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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-13 05:11:33
Element pliku wejściowego:
<input type="file" id="fileinput" />
Pobierz Plik:
var myFile = $('#fileinput').prop('files');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-30 19:42:30
Utworzyłem obiekt danych formularza i dodałem plik:
var form = new FormData();
form.append("video", $("#fileInput")[0].files[0]);
I mam:
------WebKitFormBoundaryNczYRonipfsmaBOK
Content-Disposition: form-data; name="video"; filename="Wildlife.wmv"
Content-Type: video/x-ms-wmv
W WYSŁANYCH nagłówkach. Mogę potwierdzić, że to działa, ponieważ mój plik został wysłany i przechowywany w folderze na moim serwerze. Jeśli nie wiesz, jak korzystać z obiektu FormData jest trochę dokumentacji online, ale niewiele. Form Data Object Explination by Mozilla
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-23 14:28:35
Html:
<input type="file" name="input-file" id="input-file">
JQuery:
var fileToUpload = $('#input-file').prop('files')[0];
Chcemy uzyskać tylko pierwszy element, ponieważ prop ('files') zwraca tablicę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-20 21:14:48
FileReader API z jQuery, prosty przykład.
( 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>
Do odczytu jako tekst... uncomment //fr.readAsText(file);
line and comment fr.readAsDataURL(file);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-27 10:58:32
input
element typu file
<input id="fileInput" type="file" />
Na twoim input
Zmień użyj obiektu FileReader
i przeczytaj właściwość pliku 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 załaduje Twój plik i w fileReader.result
masz dane Pliku w formacie Base64 (także content-type (MIME), text/plain, image/jpg, itp.)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-17 16:08:18
<script src="~/fileupload/fileinput.min.js"></script>
<link href="~/fileupload/fileinput.min.css" rel="stylesheet" />
Pobierz powyższe pliki o nazwie fileinput Dodaj ścieżkę i stronę indeksu.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-30 23:33:19