tengo un codigo que funciona muy bien, pero quisiera agregarle un aditivo, como el de cargar la imagen.
les pongo el codigo
Código:
<!-- Javascript -->
<script>
$(document).ready(function () {
$('#avatar').FileInput({ placeholder: 'No hay archivo seleccionado...' });
})
</script>
<!-- / Javascript -->
<div class="drop-avatar-zone">
<div class="avatar-thumbnails">
<img src="avatar/avatar.png">aca tiene ya cargada una imagen, pero debe ser reemplazada por la seleccionada
</div>
</div>
<input type="file" id="avatar">
(function() {
var FileInput;
FileInput = function($input, options) {
if (options == null) {
options = {};
}
this.options = $.extend({}, FileInput.DEFAULTS, options || {});
this.$input = $input;
this.$el = $('<div class="file-input"><span class="file-filename"></span><div class="file-actions"></div></div>').insertAfter($input).append($input);
this.$filename = $('.file-filename', this.$el);
this.$clear_btn = $(this.options.clear_btn_tmpl).addClass('boton rojo').appendTo($('.file-actions', this.$el));
this.$choose_btn = $(this.options.choose_btn_tmpl).addClass('boton azul').appendTo($('.file-actions', this.$el));
this.onChange();
$input.on('change', (function(_this) {
return function() {
return $.proxy(_this.onChange, _this)();
};
})(this)).on('click', function(e) {
return e.stopPropagation();
});
this.$el.on('click', function() {
return $input.click();
});
this.$choose_btn.on('click', function(e) {
return e.preventDefault();
});
return this.$clear_btn.on('click', (function(_this) {
return function(e) {
$input.wrap('<form>').parent('form').trigger('reset');
$input.unwrap();
$.proxy(_this.onChange, _this)();
e.stopPropagation();
return e.preventDefault();
};
})(this));
};
FileInput.DEFAULTS = {
choose_btn_tmpl: '<a href="#" class="boton azul">Seleccionar</a>',
clear_btn_tmpl: '<a href="#" class="boton rojo"><i class="fa fa-times"></i> Borrar</a>',
placeholder: null
};
FileInput.prototype.onChange = function() {
var value;
value = this.$input.val().replace(/\\/g, '/');
if (value !== '') {
this.$clear_btn.css('display', 'inline-block');
this.$filename.removeClass('placeholder');
return this.$filename.text(value.split('/').pop());
} else {
this.$clear_btn.css('display', 'none');
if (this.options.placeholder) {
this.$filename.addClass('placeholder');
return this.$filename.text(this.options.placeholder);
} else {
return this.$filename.text('');
}
}
};
$.fn.FileInput = function(options) {
return this.each(function() {
if (!$.data(this, 'FileInput')) {
return $.data(this, 'FileInput', new FileInput($(this), options));
}
});
};
$.fn.FileInput.Constructor = FileInput;
}).call(this);
