web-dev-qa-db-fra.com

html5 <input type = "fichier" accepter = "image / *" capture = "caméra"> afficher sous forme d'image plutôt que bouton "choisir un fichier"

J'ai étudié la possibilité d'utiliser HTML 5 <input type="file" accept="image/*" capture="camera"> pour prendre une photo de mon application Web et télécharger l’image dans la base de données à l’aide de php - cela fonctionne maintenant correctement.

Cependant, le seul moyen que je puisse trouver d'afficher l'option "prendre une photo" est d'utiliser un champ de texte contenant un bouton appelé "choisir le fichier".

Est-il possible de cliquer sur l'image existante pour ouvrir les options de prise de vue, puis d'afficher la nouvelle image à la place de la photo existante une fois la photo prise/le fichier sélectionné par l'utilisateur? Ils doivent ensuite cliquer sur le bouton "télécharger" s'ils souhaitent enregistrer l'image.

Voir JS fiddle ici, j'espère que cela a du sens! http://jsfiddle.net/6dxGY/

phphtmlhtml5
37
Janey

Vous devez utiliser Javascript Filereader pour cela. (Introduction dans filereader-api: http://www.html5rocks.com/en/tutorials/file/dndfiles/ )

Une fois que l’utilisateur a choisi une image, vous pouvez lire le chemin du fichier de l’image choisie et la placer dans votre code HTML.

Exemple:

<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />
</form>

Javascript:

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});
32
mdunisch

Je sais que c'est une vieille question, mais je l'ai trouvée en essayant de résoudre le même problème. Je pensais qu'il valait la peine de partager cette solution que je n'avais trouvée nulle part ailleurs.

Fondamentalement, la solution consiste à utiliser CSS pour masquer le <input> élément et style a <label> autour d'elle pour ressembler à un bouton. Cliquez sur le bouton "Exécuter l'extrait de code" pour afficher les résultats.

J'avais utilisé une solution JavaScript auparavant qui fonctionnait bien aussi, mais il est agréable de résoudre un problème de 'présentation' avec CSS uniquement.

label.cameraButton {
  display: inline-block;
  margin: 1em 0;

  /* Styles to make it look like a button */
  padding: 0.5em;
  border: 2px solid #666;
  border-color: #EEE #CCC #CCC #EEE;
  background-color: #DDD;
}

/* Look like a clicked/depressed button */
label.cameraButton:active {
  border-color: #CCC #EEE #EEE #CCC;
}

/* This is the part that actually hides the 'Choose file' text box for camera inputs */
label.cameraButton input[accept*="camera"] {
  display: none;
}
<!DOCTYPE html>
<html>

<head>
  <title>Nice image capture button</title>
</head>

<body>
  <label class="cameraButton">Take a picture
    <input type="file" accept="image/*;capture=camera">
  </label>
</body>

</html>
29
pseudosavant

Vous pouvez déclencher un élément d’entrée de fichier en lui envoyant un événement de clic Javascript, par exemple.

<input type="file" ... id="file-input">

$("#file-input").click();

Vous pouvez, par exemple, placer cela dans un gestionnaire d'événements de clic pour l'image, puis masquer l'entrée de fichier avec CSS. Cela fonctionnera toujours même si c'est invisible.

Une fois que cette partie fonctionne, vous pouvez définir un gestionnaire d’événements change sur l’élément input pour voir quand l’utilisateur y insère un fichier. Ce gestionnaire d'événements peut créer une URL temporaire "blob" pour l'image à l'aide de window.URL.createObjectURL, par exemple.:

var file = document.getElementById("file-input").files[0];
var blob_url = window.URL.createObjectURL(file);

Cette URL peut être définie en tant que src pour une image de la page. (Cependant, cela ne fonctionne que sur cette page. N'essayez pas de l'enregistrer n'importe où.)

Notez que tous les navigateurs ne supportent pas actuellement la capture de caméra. (En fait, la plupart des navigateurs de bureau ne le font pas.) Assurez-vous que votre interface a toujours du sens si l'utilisateur est invité à choisir un fichier.

13
duskwuff

Pour ceux qui ont besoin que le fichier d'entrée ouvre directement la caméra, il suffit de déclarer le paramètre capture dans le fichier d'entrée, comme ceci:

<input type="file" accept="image/*" capture>

6
Pedro Benevides