web-dev-qa-db-fra.com

Twitter Bootstrap Téléchargement d'image avec aperçu et barre de progression

Comment puis-je utiliser Twitter Bootstrap pour télécharger une seule image avec l'aperçu et la barre de progression. Comme actuellement, jusqu'à ce que j'enregistre l'image, je ne vois pas quel aperçu ou barre de progression pour télécharger l'image.

imagefile-uploadtwitter-bootstrappreview
19
azeem

Le fork de Jasny de Bootstrap vous permet de vous rapprocher. Voir documentation .

Le code:

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
  <div>
    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

Il ne semble pas avoir de barre de progression, malheureusement.

25
Paul Oliver

J'ai créé un plugin jQuery qui prévisualise les images du fichier et de l'URL. Cependant, il n'y a pas (encore) de barre de progression.

Code: https://github.com/egonolieux/bootstrap-imageupload

Démo: https://egonolieux.github.io/bootstrap-imageupload

4
Egon Olieux

J'ai essayé la réponse acceptée, mais je n'ai pas pu la faire fonctionner.

Il y a un plugin sur http://plugins.krajee.com/file-input . Il nécessite Bootstrap 3 et JQuery 2.1

Vous pouvez voir quelques démos ici et obtenir la source ici ou ici . La source a également d'autres exemples de AJAX schémas de téléchargement, glisser-déposer, etc., dans son /examples/ dossier. Il est beaucoup plus polyvalent que le plugin Jensy.

Le code suivant est ce que j'utilise sur mes sites Web. Notez que file_path/kartik-v-bootstrap-fileinput-51ddb7c/ est le dossier de code source extrait sur votre machine:

<html>
<head>
  <!-- Start of Karthik upload plugin -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <link href="file_path/kartik-v-bootstrap-fileinput-51ddb7c/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="file_path/kartik-v-bootstrap-fileinput-51ddb7c/js/fileinput.js" type="text/javascript"></script>
  <script src="file_path/kartik-v-bootstrap-fileinput-51ddb7c/js/fileinput_locale_fr.js" type="text/javascript"></script>
  <script src="file_path/kartik-v-bootstrap-fileinput-51ddb7c/js/fileinput_locale_es.js" type="text/javascript"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
</head>

<body>
  <div class="form-group col-md-6 col-xs-12">
  <form>
    <h2>Upload a picture:</h2>
      <!-- Source: http://plugins.krajee.com/file-input -->
      <div class="container kv-main">
        <div enctype="multipart/form-data">
          <div class="row">
            <div class="form-group col-md-6 col-xs-12">
              <input id="file-0a" class="file" type="file" multiple data-min-file-count="1">
            </div>
          </div>
        </div>
      </div>
  </form>
  </div>
</body>
<script>
$('#file-fr').fileinput({
  language: 'fr',
  uploadUrl: '#',
  allowedFileExtensions: ['jpg', 'png', 'gif'],
});
$('#file-es').fileinput({
  language: 'es',
  uploadUrl: '#',
  allowedFileExtensions: ['jpg', 'png', 'gif'],
});
$("#file-0").fileinput({
  'allowedFileExtensions': ['jpg', 'png', 'gif'],
});
$("#file-1").fileinput({
  uploadUrl: '#', // you must set a valid URL here else you will get an error
  allowedFileExtensions: ['jpg', 'png', 'gif'],
  overwriteInitial: false,
  maxFileSize: 1000,
  maxFilesNum: 10,
  //allowedFileTypes: ['image', 'video', 'flash'],
  slugCallback: function(filename) {
    return filename.replace('(', '_').replace(']', '_');
  }
});
/*
$(".file").on('fileselect', function(event, n, l) {
    alert('File Selected. Name: ' + l + ', Num: ' + n);
});
*/
$("#file-3").fileinput({
  showUpload: false,
  showCaption: false,
  browseClass: "btn btn-primary btn-lg",
  fileType: "any",
  previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"
});
$("#file-4").fileinput({
  uploadExtraData: {
    kvId: '10'
  }
});
$(".btn-warning").on('click', function() {
  if ($('#file-4').attr('disabled')) {
    $('#file-4').fileinput('enable');
  } else {
    $('#file-4').fileinput('disable');
  }
});
$(".btn-info").on('click', function() {
  $('#file-4').fileinput('refresh', {
    previewClass: 'bg-info'
  });
});
/*
$('#file-4').on('fileselectnone', function() {
    alert('Huh! You selected no files.');
});
$('#file-4').on('filebrowse', function() {
    alert('File browse clicked for #file-4');
});
*/
$(document).ready(function() {
  $("#test-upload").fileinput({
    'showPreview': false,
    'allowedFileExtensions': ['jpg', 'png', 'gif'],
    'elErrorContainer': '#errorBlock'
  });
  /*
  $("#test-upload").on('fileloaded', function(event, file, previewId, index) {
      alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
  });
  */
});
</script>

</html>

Vous pouvez définir data-min-file-count="x" si vous voulez vous assurer que l'utilisation télécharge au moins x photos. J'aime aussi personnellement modifier source/js/fileinput.js et définissez ce qui suit dans previewCache ligne 454:

defaultPreviewSettings = {
        image: {width: "100%", height: "auto"},
        html: {width: "213px", height: "160px"},
        text: {width: "160px", height: "136px"},
        video: {width: "213px", height: "160px"},
        audio: {width: "213px", height: "80px"},
        flash: {width: "213px", height: "160px"},
        object: {width: "160px", height: "160px"},
        other: {width: "160px", height: "160px"}
    };
1
Abhishek Divekar

Par la présente, pour télécharger directement à l'aide de HTML Blob & FormData:

// Now, let's do the upload thingy for our beloved image(s)...
//Bulk Uploading, mannn....

$('.btn-upload').on('click', function (evt) {
    var xhr = new XMLHttpRequest();
    var fd = new FormData();
    fd.append("file", document.getElementById('(your beloved id/class html element)').files[0]);
    xhr.open("POST", "/(your beloved id/class html element)/", true);
    xhr.send(fd);
    xhr.addEventListener("load", function (event) {
        var parseData = $.parseJSON(event.target.response);

        location.reload();
    }, false);
});
// end of bulk uploading...
0
Hanny Setiawan