este plugin originalmente se llama jquery.filestyle.js;
yo lo modifique quedando asi:
Código:
function($) {
$.fn.filestyle = function(options) {
/* TODO: This should not override CSS. */
var settings = {
width : 250
};
if(options) {
$.extend(settings, options);
};
return this.each(function() {
var self = this;
var wrapper = $("<div>")
.css({
"width": settings.imagewidth + "px",
"height": settings.imageheight + "px",
"background": "url(" + settings.image + ") no-repeat",
"display": "inline",
"position": "absolute"
});
var filename = $('<input class="file">')
.addClass($(self).attr("class"))
.css({
"display": "inline",
"display":"none",
"width": settings.width + "px"
});
$(self).before(filename);
$(self).wrap(wrapper);
$(self).css({
"position": "relative",
"height": settings.imageheight + "px",
"width": settings.width + "px",
"display": "inline",
"cursor": "pointer",
"opacity": "0.0"
});
if ($.browser.mozilla) {
if (/Win/.test(navigator.platform)) {
$(self).css("margin-left", "-142px");
} else {
$(self).css("margin-left", "-168px");
};
} else {
$(self).css("margin-left", settings.imagewidth - settings.width + "px");
};
$(self).bind("change", function() {
filename.val($(self).val());
});
});
};
})(jQuery);
lo modifique según lo que necesitaba en mi caso era que regresara la imagen que le pasaba sin ningún input de texto.
luego en la pagina html quedaria algo asi
Código:
<script type="text/javascript" src="js_fns/jquery.js"></script>
<script src="js_fns/jquery.filestyle.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("input[type=file]").filestyle({
image: "images/form/agregar_foto.jpg",
imageheight : 90,
imagewidth : 90,
width : 90
});
$("#fotos_cont input[type=file]").change(function(){
var form=$("#fimg");
form.submit();
});
});
y en el body
Código:
<div id="fotos_cont">
<form method="post" enctype="multipart/form-data" action="cargar_img.php" target="iframeUpload" name="fimg" id="fimg">
<div class="foto_cont" id="foto1_cont">
<input type="file" name="file">
<div class="txt_foto">agregar foto 1</div>
</div>
<iframe name="iframeUpload" style="display:none;"></iframe>
</form>
</div>
si alguien tiene alguna idea de como mejorarlo.