1

我正在实现类似于 Google Plus 的上传窗口，当窗口中的整个灰色区域（一个 div）是可点击的并且文件选择器将出现时。 谷歌加照片上传

这是我正在尝试做的一个简单的模型代码（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 中并不重要，但在我的真实代码中更必要）

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

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

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

4

2 回答 2

2

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

这是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');
});
于 2013-07-31T06:21:32.360 回答
0

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

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

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 beta 和 Internet Explorer 7-10 中对此进行了测试。这是一个相应的jsfiddle

于 2013-07-30T16:05:23.170 回答