CODEWITHSUNDEEP
javascriptjquerycssfile-upload
Mona Abdelmajeed
Mona Abdelmajeed

Reputation: 686

jQuery: open file upload window after click on div

I use (Css 2.1 And Jquery) to style file inputs

It Work Fine And every thing work fine to now

Here's example i'm talking about

Input File Demo

If you are using Firefox Every thing Work fine

But when Using Chrome Can't select file from first time My Problem

To select file in this demo Its Beside Cv

Here's My JQuery Code

(function($){
              $.fn.SafyForm = function(){
                   $(".safy_input_file").live("click", function(){
                                     var obj = $(this) ;
                                     obj.prev("input[type=file]").click() ;
                                     obj.prev("input[type=file]").change(function(){
                                         var txt = $(this).val();
                                         obj.children("span").text(txt) ;
                                     });
                   }) ;
                   return this.each(function(){
                         if($(this).is("input[type=file]"))
                                {
                                  $(this).hide().after('<div class="safy_input_file"><span> [ .docx & .doc & .pdf & .rar ] </span><label>اختار ملف</label></div>')
                                }
                   }) ;
              }
        })(jQuery);

        $(document).ready(function(){
              $('input[type=file]').SafyForm() ;
        }) ;

Code After update

(function($){
              $.fn.SafyForm = function(){
                   $(".safy_input_file").live("click",function(){
                                     var obj = $(this) ;
                                     obj.prev("input[type=file]").click() ;

                   }) ;

                   $("input[type=file]").change(function(){
                            var txt = $(this).val();
                            var safyobj = $(this).next('.safy_input_file') ;
                            safyobj.children("span").text(txt) ;
                   });

                   return this.each(function(){
                         if($(this).is("input[type=file]"))
                                {
                                  $(this).hide().after('<div class="safy_input_file"><span> [ .docx & .doc & .pdf & .rar ] </span><label>اختار ملف</label></div>')
                                }
                   }) ;
              }
        })(jQuery);

        $(document).ready(function(){
              $('input[type=file]').SafyForm() ;
        }) ;

Upvotes: 2

Views: 9552

Answers (1)

Emad Rahnama
Emad Rahnama

Reputation: 1238

you right, in chrome twice run upload. I tested your plugin in fiddle:

http://jsfiddle.net/EPxkh/61/

and is correct(1 time run). problem must be in other your webpage elements or scripts.

also try change:

input[type=file]

to

:file

Upvotes: 2

Related Questions