valuems fileupload - 适用于 Chrome，但不适用于 Firefox 和 Internet Explorer答案

【问题标题】：valums fileupload - works in Chrome but not in Firefox and Internet Explorervaluems fileupload - 适用于 Chrome，但不适用于 Firefox 和 Internet Explorer
【发布时间】：2011-10-27 08:56:30
【问题描述】：

这里是代码

$(window).load(function(){
        //File Uploader
        function createUploader(){ 
          var uploader = new qq.FileUploader({
          element: document.getElementById('fileUploaderButton'),
          action: 'upload.php',
          debug: true
        }); 
        createUploader();       
}

上传者创建后的 DOM

<button id="fileUploaderButton" style="border-radius: 5px 5px 5px 5px;">
    <div class="qq-uploader">
    <div class="qq-upload-drop-area" style="display: none;">
        <span>Drop files here to upload</span>
    </div>
    <div class="qq-upload-button" title="Upload photo" style="position: relative; overflow: hidden; direction: ltr;">
        Upload photo
        <input type="file" multiple="multiple" name="file" style="position: absolute; right: 0pt; top: 0pt; font-family: Arial; font-size: 118px; margin: 0pt; padding: 0pt; cursor: pointer; opacity: 0;">
        </div>
        <ul class="qq-upload-list"></ul>
    </div>
</button>

如果我点击 '.qq-uploader' div，文件浏览器会弹出，但仅在 Chrome 中。 #fileUploaderButton的光标是指针，但是qq-uploader的id正常。 qq-uploader div 比按钮小。在 Chrome 中，当鼠标悬停在 qq-uploader 上时，光标会发生变化。在 Internet Explorer 或 Firefox 中，它不会，即使 Firebug 显示该元素存在。

【问题讨论】：

可能是因为 'font-size: 118px;'。尝试将其内联更改为 'font-size: 0px;'并判断它是否有效。

标签： internet-explorer firefox file-upload

【解决方案1】：

我遇到了同样的问题，并通过更改容器元素解决了它。如果您尝试在上传器中转换的 DOM 元素（在您的情况下为button#fileUploaderButton）是一个按钮，它将不起作用。如果您使用div或span，它会起作用，或者至少它对我有用。在您的情况下，HTML：

<div id="fileUploaderButton">Upload</div>

和 Javascript：

$(window).load(function(){
    function createUploader(){ 
      var uploader = new qq.FileUploader({
      element: document.getElementById('fileUploaderButton'),
      action: 'upload.php',
      debug: true
    }); 
    createUploader();       
}

【讨论】：