javascript - jQuery:单击 div 后打开文件上传窗口

标签 javascript jquery css file-upload

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

它工作得很好,到现在一切都很好

这是我正在谈论的示例

Input File Demo

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

但是当使用 Chrome 第一次无法选择文件 My Problem
在此演示中选择文件它的旁边 简历

这是我的 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() ;
        }) ;

最佳答案

你说得对,在 chrome 中两次运行上传。
我在 fiddle 中测试了你的插件:

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



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

也尝试改变:

input[type=file]





:file

关于javascript - jQuery:单击 div 后打开文件上传窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12802937/

相关文章:

css - 在 : All tags stuck on the same line 上充当可标记

javascript - 如何触发CSS动画?

javascript - 在动态元素上使用 on() 处理程序不起作用

javascript - 传递 map 功能

javascript - Mozilla.com网站上的tabtab倒置标签

php - 删除 &lt;script&gt; 标签 - PHP

javascript - 在 PHP 中调用下拉列表后,ajax 不会响应

javascript - 如何删除选定的现有数据并添加新行而不影响Jquery数据表中的其他行

html - 如何叠加内联定位的 CSS 形状?

javascript - react : How to read external onChange events