Problemas jquery input file oculto y submit

[Yrnving]

Hola buenas, tengo un problema ando usando la libreria jquery, resulta que tengo una imagen que cuando le doy click abre la ventana de examinar por medio de un file oculto

Código:

$(document).ready(function(){
     $("#fotos_cont img").click(function(){
         document.all.file.click(); //input tipo file nombre file oculto.
     });
});

hasta aqui todo bien. abre la ventana y seleccionamos el archivo el problema es que cuando esta cargado quiero que se envie el formulario a un iframe y no lo hace.
es decir si coloco esto:

Código:

$(document).ready(function(){
     $("#fotos_cont img").click(function(){
         document.all.file.click(); //file input tipo file nombre file oculto.
         document.all.fimg.submit(); //fimg formulario donde esta el  input file
     });
});

me da error pero si borro el document.all.file.click(); si hace el submit o sea funciona siempre uno de los dos y no tengo idea. coloque un change dentro del input file y nada. y tambien cree una condicion para esperar que el input file tenga un valor y luego hace el submit pero tampoco si alguien tiene alguna idea. Gracias.

en fin lo que intento es que al darle click en una imagen salga en su div una animacion que diga cargando, y envie los datos del input file a iframe y que este cuando se procese active una funcion que quite la animacion de cargando. el unico problema es ese que no lo envia. si alguien tiene alguna idea de antemano muchas gracias.

[emiliodeg]

el formulario q conteiene el input file tiene q tener target="nombredeliframe"

eso esta hecho?

[Yrnving]

hola que tal aqui esta el codigo del form

Código:

<form method="post" enctype="multipart/form-data" action="cargar_img.php" target="iframeUpload" name="fimg" id="fimg">
     <input name="file" type="file" id="file" onchange="javascript: submit();" class="inputFile"/>
     <iframe name="iframeUpload"></iframe>
</form>

Modificacion: Me he dado cuenta de que cuando le doy a un botón submit que acabo de crear el input file pierde lo que tenia (lo borra) y si le doy por segunda vez si lo envía.

[Yrnving]

hey ya logre solucionarlo funciona para ie y firefox, utilizando un plugin de jquery y modificandolo ahorita le paso. el codigo por si alguien lo necesita.

[Yrnving]

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.