我採取類似的谷歌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標籤引用input元素。我個人仍然認爲這是實現可定製按鈕的更簡潔的方式。

另外請注意，我已經試過有JavaScript的抓住可點擊區域div的單擊事件，並點擊它的輸入元素。然而，正如我試圖IE兼容性，這是not doable。

來源

2013-07-29 jchu

剛剛意識到我可以通過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); 
}

$(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-31 06:21:32 jchu

道歉，如果我誤解你的要求。我修改了一下你的代碼，我相信我基本上得到了你要求的工作。

上載按鈕的點擊處理程序被調用的是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測試版和互聯網探索者7-10測試這一點。這裏有一個對應的jsfiddle

來源

2013-07-30 16:05:23

這一半回答我的問題 - 你可以點擊容器div上的任何地方，它會調出文件選擇器。 – jchu

另一半是css位置屬性的重寫。另外，我注意到當鼠標懸停在容器div的頂部時，鼠標光標並不總是一個指針。圍繞這個的任何技巧？ – jchu

欣賞你在看這個時間。正如我上面的答案所表明的那樣，我決定採取一種稍微不同的方法來解決我的問題。 – jchu

部分用於精細上傳不承認自行選擇文件按鈕，單擊

回答

HTML

CSS

JS

相關問題