jQuery:点击div后打开文件上传窗口

时间:2012-10-09 15:00:43

标签: javascript jquery css file-upload

我使用(Css 2.1和Jquery)来设置文件输入样式

工作正常现在每件事情都很好

这是我正在谈论的例子

Input File Demo

如果您使用的是Firefox,那么一切正常

但使用Chrome时无法从第一次选择文件 My Problem

要在此演示中选择文件,请在 Cv

旁边

这是我的JQuery代码

(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() ;
        }) ;

更新后的代码

(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() ;
        }) ;

1 个答案:

答案 0 :(得分:2)

你是对的,在Chrome中运行两次上传。 我用小提琴测试了你的插件:

  

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

并且是正确的(1次运行)。 问题必须出现在其他网页元素或脚本中。

也尝试改变:

  

输入[类型=文件]

  

:文件