web-dev-qa-db-fra.com

télécharger un fichier bootstrap avec aperçu de l'image

J'essaie de télécharger des fichiers avec bootstrap, mais je ne sais pas ce que je fais. Quelqu'un peut-il me dire comment faire cela et comment obtenir un aperçu de l'image pour le téléchargement car le téléchargement de fichier est destiné à télécharger des images sur mon site . Voici ce que j'ai jusqu'à présent en HTML.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<form class="form-horizontal" enctype="multipart/form-data">
  <div class="form-group">
    <label class="control-label col-sm-2">Pic Name:</label>
    <div class="col-xs-4">
      <input type="text" class="form-control" name="profilepicname" />
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2">Upload Pic:</label>
    <div class="col-xs-3">
      <input type="file" name="profilepic" />
    </div>
  </div>
</form>

De plus, il y a un grand espace entre le nom de l'image et la section de téléchargement de fichier sur la page Web. Comment puis-je m'en débarrasser?

htmlcssnode.jstwitter-bootstrap
6
jcwalker2006

Exemple de formulaire de téléchargement d'image avec aperçu, construit avec Bootstrap et sans CSS supplémentaire, il utilise jQuery AJAX pour interroger un script PHP responsable du téléchargement:

5
Francesco Borzi

Jasny Bootstrap , une bibliothèque de composants Bootstrap tiers, vous permet de vous rapprocher. 

Voir documentation .

Modifiez votre code en fonction de ceci:

<div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
  <div>
    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>
0
Virendra Nagda