个人中心
gpt4 book ai didi

javascript - Fine uploader 的自定义选择文件按钮部分无法识别点击

转载 作者：行者123 更新时间：2023-11-30 17:56:45 27 4
gpt4 key购买 nike

我正在实现类似 Google Plus 上传窗口的功能，当窗口中的整个灰色区域 (div) 都可以点击时，文件选择器就会出现。 Google Plus Photo Upload

这是我正在尝试做的事情的简单模型代码 (jsfiddle)

$(function () {
  var fineupper = new qq.FineUploader({
     element: $('#fine-uploader-container')[0],
     button: $('#clickable-area')[0],
     text: {
         uploadButton: 'click me'
     },
     request: {
         endpoint: '/example'
     },
     multiple: false
   });
 });

<body>
  <div id="upload-container" class="window">
    <div id="clickable-area" class="clickable-area">Click me</div>
  </div>
  <div id="fine-uploader-container"></div>
</body>

我看到两个问题:1) 我的“可点击区域”div 的底部不可点击。2) 我的“可点击区域”div 的 css 正在修改。特别是位置属性被覆盖为“相对”。 (在jsfiddle中没那么重要，但在我的真实代码中更需要)

有没有办法解决这两个问题？

请注意，这是 feature request 930 的延续)，我要求将我的可点击区域 div 设为引用输入元素的标签。我个人仍然认为这是实现可自定义按钮的一种更简洁的方法。

另请注意，我已尝试让 javascript 捕获可点击区域 div 的点击事件并让它点击输入元素。然而，当我尝试 IE 兼容性时，这是 not doable .

最佳答案

刚刚意识到我可以通过 jquery 向输入元素添加一个 id。这使我能够使我的容器成为标签，因此它的 css 不会被 Fineuploader 修改。 (还可以让游标保持一致)

这是 jsfiddle

HTML

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

CSS

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

JS

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

关于javascript - Fine uploader 的自定义选择文件按钮部分无法识别点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17935562/

27 4 0
文章推荐： c# - 将大量数据插入数据库时​​的效率
文章推荐： c++ - 多线程暴力和递归多维循环。其他方式？
文章推荐： c - AMD xop 检查支持
文章推荐： javascript - 从 Ext.data.Store 扩展不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com