Ver Mensaje Individual
  #5 (permalink)  
Antiguo 10/08/2009, 12:00
Yrnving
 
Fecha de Ingreso: febrero-2006
Mensajes: 148
Antigüedad: 18 años, 9 meses
Puntos: 0
Respuesta: Problemas jquery input file oculto y submit

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.