Twitter Bootstrap de transfert d'Image avec Aperçu et la Barre de Progression

Comment puis-je utiliser Twitter Bootstrap pour télécharger une seule image avec aperçu et la barre de progression. Actuellement, Jusqu'à ce que je enregistrer l'image, je ne peux pas voir ce que tout l'aperçu ou de la barre de progression de chargement de l'image.

InformationsquelleAutor azeem | 2012-12-02

Jasny la fourche du Bootstrap permet de le faire venir près. Voir la documentation.

Le code:

HTML:

<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 une barre de progression, malheureusement.

Salut merci... puis-je télécharger l'image/fichier dès que je sélectionner?
Comment puis-je télécharger l'image avec ajax?
404 page non trouvée dans le lien.

InformationsquelleAutor Paul Oliver

4

J'ai fait un plugin jQuery qui les aperçus des images à partir de fichiers et d'URL.
Cependant, il n'y a pas de barre de progression (encore).

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

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

InformationsquelleAutor Egon Olieux

J'ai essayé la accepté de répondre, mais ne pouvais pas le faire fonctionner.

Il y a un plugin à 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 de ici ou ici. La source a également d'autres exemples de l'AJAX téléchargement schémas, glisser-déposer, etc, dans son /examples/ dossier. Il est beaucoup plus polyvalent que le Jensy plugin.

Le code suivant est ce que j'utilise sur mon site web. Notez que file_path/kartik-v-bootstrap-fileinput-51ddb7c/ est l'extrait de code source dossier 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'ai aussi personnellement à modifier source/js/fileinput.js et de définir les éléments suivants 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"}
};

InformationsquelleAutor Abhishek Divekar

Par la présente, à 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...

InformationsquelleAutor Hanny Setiawan

Vous devez vous connecter pour publier un commentaire.