HTML

Question

我正在实施类似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正在修改。特别是position属性被覆盖为'relative'。（它在jsfiddle中并不重要，但在我的实际代码中更为必要）

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

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

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

Answer 1

刚刚意识到我可以通过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');
});

Answer 2

如果我误解了你的要求，我会道歉。我稍微修改了你的代码，我相信我基本上得到了你要求的工作。

上传器按钮上的点击处理程序在FineUploader放置在其内部DOM中的文件input元素上调用。通过扩展该元素以占用其父元素的整个空间，您可以在更大的区域上注册点击。

HTML

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

CSS

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

JS

$(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]]
        },

    });
});

我在最新的Chrome测试版和Internet Explorers 7-10中对此进行了测试。这是相应的 jsfiddle

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

2 个答案:

HTML

CSS

JS