Obtenir des données à partir d'une entrée de fichier en JQuery

Question

J'ai actuellement un fichier en entrée et je voudrais récupérer les données Base64 du fichier.

J'ai essayé :

$('input#myInput')[0].files[0] 

pour récupérer les données. Mais il ne fournit que le nom, la longueur, le type de contenu mais pas les données elles-mêmes.

J'ai en fait besoin de ces données pour les envoyer à Amazon S3

J'ai déjà testé l'API et lorsque j'envoie les données par le biais d'un formulaire html avec le type d'encodage "multipart/form-data", cela fonctionne.

J'utilise ce plugin : http://jasny.github.com/bootstrap/javascript.html#fileupload

Et ce plugin me donne un aperçu de l'image et je récupère les données dans l'attribut src de l'aperçu de l'image. Mais lorsque j'envoie ces données à S3, cela ne fonctionne pas. J'ai peut-être besoin d'encoder les données comme "multipart/form-data" mais je ne sais pas pourquoi.

Existe-t-il un moyen de récupérer ces données sans utiliser un formulaire html ?

Answer 1

API FileReader avec jQuery, exemple 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>

Pour lire en tant que texte... décommenter //fr.readAsText(file); ligne et commentaire fr.readAsDataURL(file);

Answer 2

Obtenir un fichier en utilisant jquery

élément html :

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

code jquery :

 $("#fileInput")[0].files[0]

cela fonctionne pour moi :)

Answer 3

HTML

<div class="row form-group my-2">
                <div class="col-12">
                    <div class="">
                        <div class="text-center">
                            <label for="inpImage" class="m-2 pointer">
                                <img src="src/img/no-image.jpg" id="img-visor" height="120" class="rounded mx-auto d-block">
                            </label>
                            <input type="file" class="visually-hidden" accept="image/*" name="picture" id="inpImage">
                        </div>
                    </div>
                </div>
            </div>

jQuery

$('#inpImage').change(()=>{
const file = $('#inpImage').prop("files")[0];
const imagen = URL.createObjectURL(file);
console.log(URL.createObjectURL(file));
$('#img-visor').attr('src', imagen);
});

Answer 4

 <script src="~/fileupload/fileinput.min.js"></script>
 <link href="~/fileupload/fileinput.min.css" rel="stylesheet" />

Télécharger les fichiers ci-dessus nommés fileinput ajouter le chemin dans votre page d'index.

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