Javascript Fine uploader的自定义选择文件按钮部分无法识别单击_Javascript_Jquery_Fine Uploader

Javascript Fine uploader的自定义选择文件按钮部分无法识别单击

javascript jquery

Javascript Fine uploader的自定义选择文件按钮部分无法识别单击,javascript,jquery,fine-uploader,Javascript,Jquery,Fine Uploader,我正在实现类似于GooglePlus的上传窗口，当窗口中的整个灰色区域（一个div）可点击时，文件选择器就会出现。这是一个简单化的模拟代码，我正在尝试做（） $（函数（）{ var fineupper=新的qq.FineUploader({ 元素：$（“#精细上传器容器”）[0]，按钮：$（“#可点击区域”）[0]，正文：{ 上传按钮：“点击我” }, 请求：{ 端点：'/example' }, 多重：假 }); }); 点击我我发现了两个问题： 1）我的“可点击区域”div的底部

我正在实现类似于GooglePlus的上传窗口，当窗口中的整个灰色区域（一个div）可点击时，文件选择器就会出现。

这是一个简单化的模拟代码，我正在尝试做（）

$（函数（）{
var fineupper=新的qq.FineUploader({
元素：$（“#精细上传器容器”）[0]，
按钮：$（“#可点击区域”）[0]，
正文：{
上传按钮：“点击我”
},
请求：{
端点：'/example'
},
多重：假
});
});
点击我

我发现了两个问题： 1）我的“可点击区域”div的底部部分不可点击。 2）我的“clickable area”div的css正在修改。尤其是位置属性被覆盖为“相对”。（这在JSFIDLE中并不重要，但在我的实际代码中更为必要）

有没有办法绕过这两个问题

请注意，这是（的延续），我要求将我的clickable area div设置为引用输入元素的标签。我个人仍然认为这是一种实现可定制按钮的更干净的方法

还要注意，我已经尝试让javascript捕获clickable area div的click事件，并让它单击输入元素。然而，当我尝试IE兼容性时，这是。

如果我误解了您的要求，请道歉。我对你的代码做了一些修改，我相信我基本上达到了你的要求

uploader按钮上的click处理程序在FineUploader放置在其内部DOM中的文件

input

元素上被调用。通过扩展该元素以占据其父元素的整个空间，可以在更大的区域上注册单击

HTML JS

我已经在最新的Chrome测试版和InternetExplorers 7-10中对此进行了测试。这里有一个对应的

刚刚实现，我可以通过jquery向输入元素添加一个id。这使我能够使容器成为一个标签，这样它的css就不会被Fineuploader修改。（它还允许光标保持一致）

这是我的建议

HTML

<body>
  <div class="window">
    <label for="qqfile" id="container" class="container"></label>
    </div>
  <div id="fine-uploader-container"></div>
</body>

这一半回答了我的问题-您可以单击容器div上的任意位置，它将打开文件选择器。另一半是覆盖css位置属性。另外，我注意到鼠标光标在容器div的顶部悬停时并不总是一个指针。有什么技巧吗？感谢您花时间看这个。正如我上面的回答所表明的，我决定用一种稍微不同的方法来解决我的问题。

<div class="container"></div>
    <div id="fine-uploader">
    </div>
</div>

.container { width: 500px; height: 500px; background-color: #ccc }
.container > input { width: 100%; height: 100% }

$(function () {
    var fineupper = new qq.FineUploader({
        element: $('#fine-uploader')[0],
        button: $(".container")[0],
        text: {
            uploadButton: 'click me'
        },
        request: {
            endpoint: '/upload/receiver'
        },
        multiple: false,
        dragAndDrop: {
        disableDefaultDropzone: true,
        hideDropzones: false,
            extraDropzones: [$(".container")[0]]
        },

    });
});

<body>
  <div class="window">
    <label for="qqfile" id="container" class="container"></label>
    </div>
  <div id="fine-uploader-container"></div>
</body>

.window {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: #ccc;
}
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  cursor: pointer;
}
.container:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

$(function () {
  var fineupper = new qq.FineUploader({
    element: $('#fine-uploader-container')[0],
    text: {
      uploadButton: ''
    },
    request: {
      endpoint: '/example'
    },
    multiple: false
  });
  $('input[name="qqfile"]').attr('id', 'qqfile');
});