sociales - Carga de imagen de Twitter Bootstrap con vista previa y barra de progreso
tamaño imagenes twitter (4)
Hice un complemento de jQuery que muestra imágenes tanto del archivo como de la URL. Sin embargo, no hay barra de progreso (todavía).
Código: https://github.com/egonolieux/bootstrap-imageupload
Demostración: https://egonolieux.github.io/bootstrap-imageupload
¿Cómo puedo usar Twitter Bootstrap para cargar una sola imagen con vista previa y barra de progreso? Como en la actualidad, hasta que guarde la imagen, no puedo ver qué vista previa o barra de progreso para cargar la imagen.
Intenté la respuesta aceptada, pero no pude hacer que funcionara.
Hay un complemento en http://plugins.krajee.com/file-input . Requiere Bootstrap 3 y JQuery 2.1.
Puedes ver algunas demostraciones here y obtener la fuente here o here . La fuente también tiene otros ejemplos de esquemas de carga AJAX, arrastrar y soltar, etc., en su carpeta /examples/ . Es mucho más versátil que el plugin Jensy.
El siguiente código es el que uso en mis sitios web. Tenga en cuenta que file_path/kartik-v-bootstrap-fileinput-51ddb7c/ es la carpeta de código fuente extraída en su máquina:
<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>
Puede configurar data-min-file-count="x" si desea asegurarse de que el uso cargue al menos x fotos. Personalmente también me gusta editar source/js/fileinput.js y configurar lo siguiente en previewCache línea 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"}
};
La horquilla de Bootstrap de Jasny te permite hacer que te acerques. Ver documentation .
El código:
<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>
No parece tener una barra de progreso, desafortunadamente.
Por la presente, para cargar directamente usando HTML Blob y 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...