texto - Obtener datos de la entrada de archivos en JQuery
obtener texto de un boton jquery (7)
De hecho, tengo una entrada de archivo y me gustaría recuperar los datos de Base64 del archivo.
Lo intenté:
$(''input#myInput'')[0].files[0]
para recuperar los datos. Pero solo proporciona el nombre, la longitud, el tipo de contenido, pero no los datos en sí.
De hecho, necesito estos datos para enviarlos a Amazon S3
Ya pruebo la API y cuando envío los datos a través de un formulario html con el tipo de codificación "multipart / form-data" funciona.
Uso este complemento: http://jasny.github.com/bootstrap/javascript.html#fileupload
Y estos complementos me dan una vista previa de la imagen y recupero datos en el atributo src de la vista previa de la imagen. Pero cuando envío estos datos a S3, no funciona. Tal vez necesite codificar los datos como "multipart / form-data", pero no sé por qué.
¿Hay alguna manera de recuperar estos datos sin usar un formulario html?
Creé un objeto de datos de formulario y anexé el archivo:
var form = new FormData();
form.append("video", $("#fileInput")[0].files[0]);
y tengo:
------WebKitFormBoundaryNczYRonipfsmaBOK
Content-Disposition: form-data; name="video"; filename="Wildlife.wmv"
Content-Type: video/x-ms-wmv
en los encabezados enviados. Puedo confirmar que esto funciona porque mi archivo fue enviado y almacenado en una carpeta en mi servidor. Si no sabe cómo utilizar el objeto FormData, hay alguna documentación en línea, pero no mucho. Formulario de búsqueda de objetos de datos por Mozilla
FileReader API con jQuery, ejemplo simple.
( 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>
Para leer como texto ... descomente //fr.readAsText(file); línea y comentario fr.readAsDataURL(file);
Html:
<input type="file" name="input-file" id="input-file">
jQuery:
var fileToUpload = $(''#input-file'').prop(''files'')[0];
Queremos obtener el primer elemento solamente, porque prop (''files'') devuelve array.
elemento de input , de tipo file
<input id="fileInput" type="file" />
En su cambio de input use el objeto FileReader y lea su propiedad de archivo de 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 cargará su archivo y en fileReader.result tendrá los datos del archivo en formato Base64 (también el tipo de contenido del archivo (MIME), texto / plano, imagen / jpg, etc.)
elemento de archivo de entrada:
<input type="file" id="fileinput" />
Obtener el archivo :
var myFile = $(''#fileinput'').prop(''files'');
puedes probar FileReader API algo como esto.
<!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>
<script src="~/fileupload/fileinput.min.js"></script>
<link href="~/fileupload/fileinput.min.css" rel="stylesheet" />
Descargue los archivos anteriores llamados fileinput add the path en su página de índice.
<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>